Ana Tudor 是當(dāng)你點(diǎn)擊她CodePen賬號你會被嚇~尿的女神绍昂。你會不禁喊道“天（wo）吶（cao）”。這條女漢子屌爆了。她css創(chuàng)造了讓人難以置信的視覺效果官份，我最喜歡this infinitely unpacked prism這個(gè)效果。下面的文章介紹了她驚艷的3D變形的經(jīng)驗(yàn)和過程烙丛。
ie9和Opera 12以下 是不支持 CSS 3D transforms 舅巷，關(guān)于支持信息細(xì)節(jié)請移步caniuse.co.
css動畫現(xiàn)在已經(jīng)非常流行了，當(dāng)然我說的是不只是簡單顏色變化和尺寸的變化河咽，3D變形動畫也很火钠右。css立體翻轉(zhuǎn)就是很好的例子。你可以找到些關(guān)于css變形的代碼忘蟹，更重要的是程序員要理解什么激動的要發(fā)生飒房。讓我?guī)阋徊讲截灤┤绾螛?gòu)建 3d變形動畫搁凸。
我們來看，有個(gè)門在門框里狠毯。
http://jsbin.com/cugoboci/1/
很簡單的html
<div class='container'>
<div class='frame'>
<div class='door'></div>
</div>
</div>
為了讓門打開坪仇，我們添加個(gè)class：“door--open”
<div class='container'>
<div class='frame'>
<div class='door door--open'></div>
</div>
</div>
現(xiàn)在我們講對這個(gè)class 應(yīng)用3D變形。應(yīng)用到transform-origin
.door--open {
transform-origin: 0 0 /*whatever y value you wish*/;
transform: rotateY(-45deg);
}
看起來不怎么靠譜垃你，有一種特性叫做透視椅文，用來解決這個(gè)問題，透視顧名思義惜颇，近大遠(yuǎn)小皆刺。 css 透視屬性 perspective 應(yīng)該應(yīng)用到3d變形的父元素上面。當(dāng)然只能在WebKit內(nèi)核瀏覽器實(shí)現(xiàn)凌摄，在火狐羡蛾，ie是不行滴。
那現(xiàn)在我們把透視樣式 frame--realistic 用到門框上
<div class='container'>
<div class='frame frame--realistic'>
<div class='door door--open'></div>
</div>
</div>
現(xiàn)在我們把perspective應(yīng)用上 perspective的值越小視覺上離眼睛比較近锨亏，讓變形的元素顯示比較大
.frame--realistic {
perspective: 20em;
}
現(xiàn)在看起來好多了痴怨，但是我們可以做更多，例如我們可以給門加一些3D的動畫器予，把門的class door--open換成 door--ani浪藻，css如下
.door--ani {
transform-origin: 0 0;
animation: doorani 1.3s ease-in-out infinite alternate;
}@keyframes doorani {
from { transform: rotateY(-43deg); }
to { transform: rotateY(43deg); }
}
那現(xiàn)在我們把3d動畫放到門框上把透視放到container上面。
現(xiàn)在感覺不太對乾翔，感覺門和門框在一個(gè)平面內(nèi)爱葵。這個(gè)是門框transform-style的緣故默認(rèn)是flat。 當(dāng)我們設(shè)置成preserve-3d 時(shí)候保留3d視圖效果反浓，這個(gè)不大好懂萌丈，參考文章圖文理解 CSS3 3D Transform
我們來試試4個(gè)面立方體
讓它動起來
什么？雷则？ 這么簡單就完了辆雾？ 騷年100個(gè)面呢？
