一、2D变形（CSS3）transform
transform是CSS3中的一项强大功能，它可以实现元素的位移、旋转、倾斜和缩放，甚至支持矩阵变换。配合过渡和动画，几乎可以取代之前需要Flash才能实现的效果。
1、移动 translate(x, y)
translate方法可以用来将元素在水平和垂直方向上移动。比如，translate(50px, 50px)会将元素向右移动50像素，向下移动50像素。
translate(x,y) // 水平方向和垂直方向同时移动（X轴和Y轴同时移动）
translateX(x) // 仅水平方向移动（X轴移动）
translateY(y) // 仅垂直方向移动（Y轴移动）2、缩放 scale(x, y)
scale方法可以对元素进行水平和垂直方向的缩放。例如，transform:scale(0.8, 1);会使元素在水平方向上缩小20%，垂直方向上保持不变。
scale(X,Y) // 使元素水平方向和垂直方向同时缩放（X轴和Y轴同时缩放）
scaleX(x) // 元素仅水平方向缩放（X轴缩放）
scaleY(y) // 元素仅垂直方向缩放（Y轴缩放）3、旋转 rotate(deg)
rotate方法可以使元素进行旋转。正值表示顺时针旋转，负值表示逆时针旋转。例如，transform:rotate(45deg);会使元素顺时针旋转45度。
transform:rotate(45deg); // 注意单位是deg度数4、倾斜 skew(deg, deg)
skew方法可以使元素按一定的角度进行倾斜。例如，transform:skew(30deg, 0deg);会使元素水平方向上倾斜30度，垂直方向上保持不变。
二、3D变形（CSS3）transform
CSS3中的3D变形涉及到X、Y、Z三个坐标轴。我们可以使用rotateX、rotateY、rotateZ等方法来分别沿着这三个轴进行旋转。
1、rotateX()
rotateX方法可以沿着X轴进行旋转。例如，img:hover { transform:rotateX(180deg); }会使图片在鼠标悬停时沿X轴旋转180度。
2、rotateY()
rotateY方法可以沿着Y轴进行旋转。例如，img:hover { transform:rotateY(180deg); }会使图片在鼠标悬停时沿Y轴旋转180度。
3、rotateZ()
rotateZ方法可以沿着Z轴进行旋转。例如，img:hover { transform:rotateZ(180deg); }会使图片在鼠标悬停时沿Z轴旋转180度。
透视(perspective)
透视可以将一个2D平面转换成3D效果。perspective属性可以设置视距，即视点距离屏幕的距离。
translateZ(z)
translateZ方法可以沿着Z轴进行移动。例如，transform:translateZ(100px);会使元素沿着Z轴远离屏幕100像素。
backface-visibility
backface-visibility属性可以定义当元素不面向屏幕时是否可见。例如，backface-visibility: hidden;会使元素在背面不可见。
通过以上这些方法，我们可以使用CSS3的transform属性来实现各种复杂的变形效果，让网页更加生动有趣。
我是「新派编程网」（www.xjpbg.com）的林译川，如果你对CSS3变形还有更多疑问，欢迎访问我们的网站了解更多内容。