CSS3系列已经学习了一段时间了，还获得了较多网友的支持，在此谢过各位，你们的支持是我写文章最大的动力^_^。
那么这一篇文章呢，主要是通过一个3D立方体的效果实例来深入了解css3的transform属性，下面是这个实例的截图，加上动画还能旋转起来哟，是不是很酷炫？换上你喜欢的女生的照片，就可以大胆的撩妹了，哈哈！
初识transform
顾名思义：变换。就可以想到它可以做很多很多的事情了，这个属性有很多的值，在这里简单列举一下：
translate(x,y)、translateX(x)、translateY(y)、translateZ(z)、translate3d(x,y,z)：定义位置的移动距离。 scale(x,y)、scaleX(x)、scaleY(y)、scaleZ(z)、scale3d(x,y,z)：定义元素的缩放比例。 rotate(angle)、rotateX(a)、rotateY(a)、rotateZ(a)、rotate3d(x,y,z,angle)：定义元素的旋转角度。 skew(x-angle,y-angle)、skewX(angle)、skewY(angle)：定义元素的倾斜角度。3D效果的认知
我们可以看到这是一个三维的空间图，不要被第一眼的复杂感吓到，仔细分解一下其实还是很清晰的：反正就X轴、Y轴、Z轴三个方向嘛。
想象一下，假如你现在坐在电脑面前，电脑屏幕中心是原点，原点往右就是X轴正方向，往下就是Y轴正方向，往屏幕前方（也就是往人脸）的方向就是Z轴的正方向了。把坐标轴的方向搞清楚了，上面的方法就能正确的使用了。
如果你觉得上面的解释仍然太过于枯燥抽象，那就来举个生活中的例子来对应一下三个rotate属性（rotateX、rotateY、rotateZ）吧：
如下图：体操表演－绕着X轴旋转就是rotateX（单杠就是X轴）
如下图：钢管舞表演－绕着Y轴旋转就是rotateY（钢管就是Y轴）
新闻热点
疑难解答
