CSS3 3D transform变换
transform的坐標是需要了解的特性。
我們的rotateX,rotateY,rotateZ,和translateX,translateY等都是基于相同的坐標系來定位的。
3D的坐標如下入所示：
?
?
3D transform中有下面這三個方法：
- rotateX( angle )
- rotateY( angle )
- rotateZ( angle )
理解了這三個方法，后面更難懂的perspective就好下手了，可以說是突破口！
rotate旋轉的意思，rotateX旋轉X軸，rotateY旋轉Y軸，rotateZ旋轉Z軸,其中：
它們使用angle值作為參數。如果是正角度，元素順時針旋轉。如果是負角度，元素逆時針旋轉。
?
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的透視點是在瀏覽器的前方！
或者這么理解吧：顯示器中3D效果元素的透視點在顯示器的上方（不是后面），近似就是我們眼睛所在方位！
比如：?
? ? ? ?一個1680像素寬的顯示器中有張美女圖片，應用了3D transform，同時，該元素或該元素父輩元素設置的perspective大小為2000像素。
則這張美女多呈現的3D效果就跟你本人在1.2個顯示器寬度的地方(1680*1.2≈2000)看到的真實效果一致！！
?
?
? perspective屬性有兩種書寫形式，一種用在舞臺元素上（動畫元素們的共同父輩元素）；第二種就是用在當前動畫元素上，與transform的其他屬性寫在一起。如下代碼示例：
?
?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>效果圖如下：
這兩種寫法的效果存在很大的區別：
上面舞臺整個作為透視元素，因此，顯然，我們看到的每個子元素的形體都是不一樣的；
而下面，每個元素都有一個自己的視點，因此，顯然，因為rotateY的角度是一樣的，因此，看上去的效果也就一模一樣了！
?
perspective-origin
? perspective-origin這個屬性超級好理解，表示你那雙色迷迷的眼睛看的位置。默認就是所看舞臺或元素的中心。
transform-style: preserve-3d
transform-style屬性也是3D效果中經常使用的，其兩個參數，flat|preserve-3d.
前者flat為默認值，表示平面的；后者preserve-3d表示3D透視。
基本上，我們想要根據現實經驗實現一些3D效果的時候，transform-style: preserve-3d是少不了的。
一般而言，該聲明應用在3D變換的兄弟元素們的父元素上，也就是舞臺元素。
?
轉載于:https://www.cnblogs.com/xuzhudong/p/7910973.html
總結
以上是生活随笔為你收集整理的CSS3 3D transform变换的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 一个权重的物体拷贝权重给多个（oneWe
- 下一篇： CSS3实现小黄人动画