预览地址
transform
transform 属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。
倾斜
2D:skew(x-angle,y-angle)
向左倾斜30度:
transform:skew(30deg,0);
缩放
2D:scale(x,y)
3D:scale3d(x,y,z) or scaleX(x) scaleY(y) scaleZ(z)
压缩2倍:
transform:scale(0.5, 1);
旋转
2D:rotate(angle)
3D:rotate3d(x,y,z,angle) or rotateX(angle) rotateY(angle) rotateZ(angle)
旋转45度:
transform:rotate(45deg);
移动
2D:translate(x,y)
3D:translate3d(x,y,z) or translateX(x) translateY(y) translateZ(z)
x轴位移10px y轴位移20px:
transform: translate(10px, 20px);