CSS3:transform

预览地址

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);