標籤：nsf 平面 utf-8 href absolute 效果 text 首碼 orm
3D： 脫離文檔流，平均角度，按z軸即垂直div往外，各自推送相同的距離
1、perspective的作用？
使具有3D效應的元素，產生透視效果，若沒有透視效果，你看到的只是2維的平面
2、perspective-3d的作用？
規定了子項目是看起來位於3維空間，還是在2維平面
當只有perspective時，很容易產生一些奇怪的透視3維平面，即其子項目應該是3維的透視到此父元素的平面上，但由於沒有perspective-3d則會在其上平面化顯示，即有獨立的3維空間但顯示確偏2維，而只有perspective-3d時，則會顯示的完全平面化，即有獨立3維空間，但不能透視只能看到2維平面
總結：起來就是，perspective-3d使子項目有獨立3維空間，而perspective使其能顯現出來
3、為何不直接在一個容器中透視，而要中間添加一個？
因為直接在容器上輪播的話，由於變化的是容器，所以變化時由於視角的變化會產生不同的大小的視覺誤差，但是在大包含塊上透視，而容器變化則不會影響
CSS Transforms的屬性：
1、perspective（透視）
聲明在父元素上，作用在子項目上
用法：
perspective：1000px;（自己注意相容性，加首碼）
規律：
近大遠小，所謂近大遠小，也很好理解，比如說你的眼睛是透視點，而perspective屬性規定的其子項目離你眼睛的距離，而在父元素上的只是以眼睛為透視點，以其為畫布的透視（不好理解，你可以理解為投影，至少大小上是一個原理）
2、transfrom
此屬性有很的值，不一一列舉
（1）translateX、Y、Z（）
這三個元素用來將元素3維移動，X、Y、Z的正方向分別對應的是平行螢幕向右、平行螢幕向下、以及垂直螢幕向外，製作3D映像的時候translateZ是很重要的屬性
（2）rotateX、Y、Z（）
這三個元素用來將元素3維旋轉，X、Y、Z的正方向，分別對應的是沿著X軸向螢幕內轉，沿著Y軸向螢幕外轉，以及沿著Z軸平行螢幕順時針轉
<!DOCTYPE html><html><head><meta charset="utf-8"> <title></title> <link rel="stylesheet" type="text/css" href="1.css"></head><body><section id="darkred" class="container"> <div class="box"></div></section><section id="darkblue" class="container"> <div class="box"></div></section></body></html>
CSS代碼：.container { display: block; width: 200px; height: 200px; margin-bottom: 50px; border: 1px solid #bbb;}.box { width: 100%; height: 100%; opacity: .75;}#darkred .box { background-color: darkred; transform: perspective(600px) rotateX(45deg);}#darkblue { perspective: 600px;}#darkblue .box { background-color: darkblue; transform: rotateY(45deg);}
分別對應X、Y轉45deg，很明顯看出X、Y的正方向一個向裡，一個向外
用法：連用時直接用空格串連transform: perspective(600px) translateZ(40px) rotateX(45deg);
3、transform-style
（1）perspective-3d
用來將子項目繼承3d
（2）flat
預設平面
Firefox支援，Chrome、Safari和Opera加-webkit首碼
4、backface-visibility
旋轉不希望看到元素的背面可以使用此屬性
用法：backface-visibility: hidden;
3D動畫轉化思維
1、父元素perspective，子項目absolute（使圖片重合），分別旋轉相同角度，相加為360deg，在往Z軸正方向推送同樣距離，具體演算法參照
初中數學，沒tan值的計算機，參照 r = 64 / Math.tan( 20 * Math.PI /180 )
2、最後將父元素沿著Y軸的轉動設定為動畫，OK
CSS3 3D轉換transform
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
