CSS3 3D transform变换
transform的坐標(biāo)是需要了解的特性。
我們的rotateX,rotateY,rotateZ,和translateX,translateY等都是基于相同的坐標(biāo)系來(lái)定位的。
3D的坐標(biāo)如下入所示：
?
?
3D transform中有下面這三個(gè)方法：
- rotateX( angle )
- rotateY( angle )
- rotateZ( angle )
理解了這三個(gè)方法，后面更難懂的perspective就好下手了，可以說(shuō)是突破口！
rotate旋轉(zhuǎn)的意思，rotateX旋轉(zhuǎn)X軸，rotateY旋轉(zhuǎn)Y軸，rotateZ旋轉(zhuǎn)Z軸,其中：
它們使用angle值作為參數(shù)。如果是正角度，元素順時(shí)針旋轉(zhuǎn)。如果是負(fù)角度，元素逆時(shí)針旋轉(zhuǎn)。
?
2. 必不可少的perspective屬性
? ?perspective屬性的存在與否決定了你所看到的是2次元的還是3次元的，也就是是2D transform還是3D transform.?
? ? 我們看demo1:
<!DOCTYPE html> <html> <head> <style> #div1{position: relative;height: 150px;width: 150px;margin: 50px;padding:10px;border: 1px solid black;/*perspective:150;-webkit-perspective:150; /* Safari and Chrome */*/ } #div2 {padding:50px;position: absolute;border: 1px solid black;background-color: yellow;transform: rotateX(45deg);-webkit-transform: rotateX(45deg); /* Safari and Chrome */ } </style> </head> <body> <div id="div1"><div id="div2">HELLO</div> </div> </body> </html>?是否添加perspective屬性，顯示的樣式分別如下：
? ? &&
我們要知道：?
CSS3 3D transform的透視點(diǎn)是在瀏覽器的前方！
或者這么理解吧：顯示器中3D效果元素的透視點(diǎn)在顯示器的上方（不是后面），近似就是我們眼睛所在方位！
比如：?
? ? ? ?一個(gè)1680像素寬的顯示器中有張美女圖片，應(yīng)用了3D transform，同時(shí)，該元素或該元素父輩元素設(shè)置的perspective大小為2000像素。
則這張美女多呈現(xiàn)的3D效果就跟你本人在1.2個(gè)顯示器寬度的地方(1680*1.2≈2000)看到的真實(shí)效果一致！！
?
?
? perspective屬性有兩種書(shū)寫(xiě)形式，一種用在舞臺(tái)元素上（動(dòng)畫(huà)元素們的共同父輩元素）；第二種就是用在當(dāng)前動(dòng)畫(huà)元素上，與transform的其他屬性寫(xiě)在一起。如下代碼示例：
?
?demo2如下：
.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) rotateY(45deg); }#darkblue {perspective: 600px; } #darkblue .box {background-color: darkblue;transform: rotateY(45deg); } </style> </head> <body><section id="darkred" class="container"><div class="box"></div></section><section id="darkblue" class="container"><div class="box"></div></section> </body>效果圖如下：
這兩種寫(xiě)法的效果存在很大的區(qū)別：
上面舞臺(tái)整個(gè)作為透視元素，因此，顯然，我們看到的每個(gè)子元素的形體都是不一樣的；
而下面，每個(gè)元素都有一個(gè)自己的視點(diǎn)，因此，顯然，因?yàn)閞otateY的角度是一樣的，因此，看上去的效果也就一模一樣了！
?
perspective-origin
? perspective-origin這個(gè)屬性超級(jí)好理解，表示你那雙色迷迷的眼睛看的位置。默認(rèn)就是所看舞臺(tái)或元素的中心。
transform-style: preserve-3d
transform-style屬性也是3D效果中經(jīng)常使用的，其兩個(gè)參數(shù)，flat|preserve-3d.
前者flat為默認(rèn)值，表示平面的；后者preserve-3d表示3D透視。
基本上，我們想要根據(jù)現(xiàn)實(shí)經(jīng)驗(yàn)實(shí)現(xiàn)一些3D效果的時(shí)候，transform-style: preserve-3d是少不了的。
一般而言，該聲明應(yīng)用在3D變換的兄弟元素們的父元素上，也就是舞臺(tái)元素。
?
轉(zhuǎn)載于:https://www.cnblogs.com/xuzhudong/p/7910973.html
總結(jié)
以上是生活随笔為你收集整理的CSS3 3D transform变换的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： 一个权重的物体拷贝权重给多个（oneWe
- 下一篇： 软件工程网络15个人阅读作业2（2015