CSS 2D 转换可以实现,位移、旋转、缩放等效果
移动: translate
旋转: rotate
缩放: scale
二维坐标系
2D转换是改变标签在二维平面上的位置和形状的一种技术,先来学习二维坐标系
(1)变形的移动的效果
div {
width: 300px;
height: 300px;
background-color: pink;transform: translateX(100px);
transform: translate(100px, 100px);
}
/*transform: translate(x, y);*/
/*写法一*/
transform: translate(10px, 0);
/*写法二*/
transform: translateX(100px);
/*写法三*/
transform: translateY(100px);
重点
1. 定义2D转换中的移动,沿着X和Y轴移动元素
2. translate最大的优点∶不会影响到其他元素的位置
3. translate中的百分比单位是相对于自身元素的translate:(50%,50%)
4. 对行内标签没有效果