3d變換
perspective （透視，視角）： 屬性定義 3d 元素距檢視的距離，以畫素計。該屬性允許您改變 3d 元素檢視 3d 元素的檢視。決定了你所看到的是2d transform 還是3d transform 。
視距（perspective）和translatez
視距就是眼睛距離物體原本位置的距離，而translatez()就是用來改變 物體當前位置 離 物體原本所在位置距離的方法。
當translatez的值大於或者很接近視距的時候，那整個螢幕都被這個元素佔滿了。
景深基點（perspective-origin
perspective-origin屬性定義3d元素所基於的x軸和y軸。該屬性允許您改變3d元素的底部位置。說白了就是你移動到不同的地方看這個元素，預設值是正對著元素看，即 perspective-origin: 50% 50% 0;
第乙個值可以為left|right|center|百分比|length，表示向x軸方向移動視角（眼睛所在的位置）的距離。
第二個值可以為top|bottom|center|百分比|length，表示向y軸方向移動視角（眼睛所在的位置）的距離。
第三個值只能是具體的length，表示視角向z軸方向移動的距離。
如果在該屬性父元素上和子元素上都設定了perspective會疊加，從而形成更佳立體的效果
在父元素： perspective: 800px;
在子元素 ： transform: perspective(800px) rotatey(45deg);
ps： perspective作為屬性值的時候最好寫在第一位
設定在子元素上時，origin預設時center center
背面隱藏（backface-visibility）
屬性定義當元素不面向螢幕時是否可見。如果在旋轉元素不希望看到其背面時，該屬性很有用。預設值是visible，背面可見。
當設定了backface-visibility:hidden;的時候，當乙個元素旋轉知道完全翻了乙個面的時候，那麼這個元素將會不可見。
參考：3d翻轉效果
思路：（1）最外層元素設定perspective以實現3d效果。
（2）當滑鼠滑過最外層元素時，第二包裹層翻轉180度，同時設定過渡速度。
（3）兩個翻轉塊絕對定位，以致實現相同位置的疊加。同時設定backface-visibility避免在實現動畫效果時露出背面。
（4）讓.back最開始就翻轉180度，以背面示人。
易烊千璽!!h3
馬天宇!!h3
朱一龍!!h3
小鬼!!h3
>
div>
a>
div>
div>
body
.contentbox
.qcontainer
.film
.film img
.qcontainer:hover .film
.face
.face h3
.back
效果：
CSS3 3D翻轉相簿
transform屬性和transition過渡屬性，結合jquery 實現翻轉功能。1 doctype html 2 html lang en 3 head 4 meta charset utf 8 5 title 3d翻轉相簿 title 6 script src jquery 3.0.0.mi...
CSS3 3D轉換效果
css3 中是通過transform style樣式屬性來實現 3d 立體效果的，為父元素設定了該屬性其子元素就會具有 3d 效果，對應的屬性值如下 舉個例子 實現乙個正方體效果 主要是通過父元素的四條邊和前後面來構成正方體的六個面，再結合transform style 平移和旋轉等方法就可以實現。...
css3 3D文字效果
text shadow x offset y offset blur size color x代表x軸上的位移，y代表y軸上的位移，可為負值 blur表示投影的寬度，不能為負值 color為投影的顏色 多重投影 text shadow wei astyle head body div id wei ...