3d變形
使用二維變形能夠在水平和垂直軸上改變元素, 然而還有一個軸,沿著它可以改變元素, z軸
z軸的正方向就是垂直屏幕向外
相關(guān)函數(shù)
- 旋轉(zhuǎn) rotateX() rotatY() rotateZ()
- 位移 translateZ()
- 縮放 scaleZ()
旋轉(zhuǎn)
rotateX() x軸旋轉(zhuǎn)
rotateY() y軸旋轉(zhuǎn)
rotateZ() z軸旋轉(zhuǎn)
<p data-height="266" data-theme-id="0" data-slug-hash="eZPdXV" data-default-tab="result" data-user="lulupy" data-embed-version="2" class="codepen">See the Pen <a >eZPdXV</a> by lulu (<a >@lulupy</a>) on <a >CodePen</a>.</p>
<script async src="http://assets.codepen.io/assets/embed/ei.js"></script>
perspective
上面的例子紙牌沿x軸旋轉(zhuǎn)了45度, 紙牌看上只是沿y軸縮小了一些, 并沒有看到3d的效果,我們通常子在它的父元素上設(shè)置perspective屬性來激活3d效果
perspective屬性的值決定了3D效果的強烈程度什黑，可以認為是觀察者到頁面的距離嗤朴。值越大距離越遠额衙，視覺上的3D效果就會相應(yīng)的減弱啤覆。perspective: 2000px; 會產(chǎn)生一個好像我們使用望遠鏡看遠方物體的3D效果铸磅，perspective: 100px;會產(chǎn)生一個小昆蟲看大象的效果刁赦。
perspective-origin
定義了消失點的位置,如當你沿著鐵路線去看兩條鐵軌隔缀，沿著公路線去看兩邊排列整齊的樹木時，兩條平行的鐵軌或兩排樹木連線交與很遠很遠的某一點鹦赎，這點在透視圖中叫做消失點谍椅。
<p data-height="266" data-theme-id="0" data-slug-hash="bpmBVq" data-default-tab="result" data-user="lulupy" data-embed-version="2" class="codepen">See the Pen <a >bpmBVq</a> by lulu (<a >@lulupy</a>) on <a >CodePen</a>.</p>
<script async src="http://assets.codepen.io/assets/embed/ei.js"></script>
上面的例子我們定了perspective-origin的位置為紙牌父元素的右上角
div{
perspective: 2000px;
perspective-origin: 500px 0px
}
backface-visibility
backface-visibility屬性指定當元素背面朝向觀察者時是否可見。元素的背面總是透明的古话，當其朝向觀察者時雏吭，顯示正面的鏡像。
在某些情況下陪踩，我們不希望元素內(nèi)容在背面可見杖们，比如實現(xiàn)翻牌效果。
transform-style
transform-style屬性指定了肩狂，該元素的子元素是（看起來）位于三維空間內(nèi)摘完，還是在該元素所在的平面內(nèi)被扁平化。
如果被扁平化傻谁，則子元素不會獨立的存在于三維空間孝治。
