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軸）
新聞熱點
疑難解答
