顧名思義：變換。就可以想到它可以做很多很多的事情了，這個屬性有很多的值，在這裡簡單列舉一下：
translate(x,y)、translatex(x)、translatey(y)、translatez(z)、translate3d(x,y,z)：定義位置的<code>移動距離</code>。
scale(x,y)、scalex(x)、scaley(y)、scalez(z)、scale3d(x,y,z)：定義元素的<code>縮放比例</code>。
rotate(angle)、rotatex(a)、rotatey(a)、rotatez(a)、rotate3d(x,y,z,angle)：定義元素的<code>旋轉角度</code>。
skew(x-angle,y-angle)、skewx(angle)、skewy(angle)：定義元素的<code>傾斜角度</code>。
我們可以看到這是一個三維的空間圖，不要被第一眼的複雜感吓到，仔細分解一下其實還是很清晰的：反正就x軸、y軸、z軸三個方向嘛。
想象一下，假如你現在坐在電腦面前，<code>電腦螢幕中心是原點，原點往右就是x軸正方向，往下就是y軸正方向，往螢幕前方（也就是往人臉）的方向就是z軸的正方向了</code>。把坐标軸的方向搞清楚了，上面的方法就能正确的使用了。
如果你覺得上面的解釋仍然太過于枯燥抽象，那就來舉個生活中的例子來對應一下三個rotate屬性（rotatex、rotatey、rotatez）吧：
如下圖：體操表演－繞着x軸旋轉就是<code>rotatex</code>（單杠就是x軸）
如下圖：鋼管舞表演－繞着y軸旋轉就是<code>rotatey</code>（鋼管就是y軸）
如下圖：轉盤旋轉－繞着z軸在旋轉就是<code>rotatez</code>（想象有一根繩子從轉盤的中心穿過，圖不好找＝＝）
perspective的中文意思是：透視，視角！該屬性用來激活一個3d空間。
當為元素定義perspective屬性時，其子元素都會獲得透視效果（使用了3d變換的元素）。是以一般來說perspective屬性都應用在父元素上，我們可以把這個父元素稱為<code>舞台元素</code>。
隻看解釋可能還是難以了解，我們還是用執行個體說話吧：
從上圖可以看出，div1是div2的父元素，開始我們給div2元素增加旋轉<code>transform:rotatex(50deg)</code>的時候，隻感覺div2在平面上被‘壓縮’了，沒有3d的效果，然後當我們給父元素div1增加<code>perspective: 150px;</code>的時候，立馬就能看到3d的效果了，感受到他的神奇之處了吧。
<code>另外，perspective的取值也一直是個謎，經過我的多次查閱和測試，得出了一下幾個結論</code>：
取值為none或不設定，就沒有3d空間。
取值越小，3d效果就越明顯，也就是你的眼睛越靠近真3d。
貌似當取值為元素的寬度時，視覺效果比較好。
transform-style指定嵌套元素如何在3d空間中呈現。
<code>flat</code>是預設值，表示所有子元素在2d平面呈現；<code>preserve-3d</code>表示所有子元素在3d空間中呈現。
是以，我們想要實作一些3d效果的時候，<code>transform-style: preserve-3d</code>是少不了的。一般而言，該聲明應用在3d變換的兄弟元素們的父元素上，我們可以叫它<code>容器</code>。
transform-origin用來改變元素的原點位置。
它的取值方式有很多種，下面我們通過執行個體（把背景為黃色的div順時針旋轉45deg）來介紹一下它的常用取值方式：
<code>transform-origin:center</code>（預設值，等價于：center center/ 50% 50%）
<code>transform-origin:top</code>（等價于：top center/center top）
<code>transform-origin:bottom</code>（等價于：bottom center/center bottom）
<code>transform-origin:right</code>（等價于：right center/center right）
<code>transform-origin:left</code>（等價于：left center/center left）
<code>transform-origin:top left</code>（等價于：left top）
同理，還可以設定為：
<code>transform-origin:top right（右上角為原點）</code>、<code>transform-origin:bottom right（右下角為原點）</code>、<code>transform-origin:bottom left（左下角為原點）</code>
各位看官等不及了吧，講了那麼多‘廢話’，本篇文章的<code>重頭戲</code>終于來了！
對于舞台元素
對于容器
立方體的每個面
立方體頂面
立方體底面
立方體左面
立方體右面
立方體前面
立方體後面
最後别忘了給每個不同面加上圖檔，位置什麼的再稍微調一下，這個酷炫的立方體就大功告成了。
最後我們還想要這個立方體自己動起來，我定義了一個動畫，看官們可以試試。
最後把這個動畫用到這個立方體的容器元素上，就ok了：
總而言之，在我學習css3的過程中，見到了不少的新特性，也學會了如何使用，但是我想說的是我們不管要學會怎麼使用，更要去了解每一行代碼為什麼産生對應的效果，特别是對于<code>3d transform</code>，我們要從根本去了解了<code>3d空間</code>，才能更好的去掌握它的每一個屬性值能夠帶來的效果。
這篇文章内容稍微有點多，自己記錄這篇文章的同時又對這個效果學習鞏固了一篇，還是蠻開心哒。同時也希望能對各位看官在以後學習<code>3d transform</code>的道路上起到一點點作用！
轉載自：阿裡技術協會
作者：義坤