以下內(nèi)容根據(jù)官方規(guī)范翻譯，沒(méi)有翻譯關(guān)于SVG變換的內(nèi)容和關(guān)于矩陣計(jì)算的內(nèi)容。

一般情況下，元素在一個(gè)無(wú)景深無(wú)立體感的平面（flat plane）上渲染，這個(gè)平面就是其包含塊所處的平面。同時(shí)，頁(yè)面上的其他元素也共享這個(gè)平面。2D變換函數(shù)雖然能改變?cè)氐谋憩F(xiàn)，但是這個(gè)被改變的元素仍然是在其包含塊所處的平面內(nèi)被渲染。

3D變換會(huì)產(chǎn)生一個(gè)變換矩陣，該變換矩陣在Z軸上的分量不為0。結(jié)果是把元素渲染到一個(gè)不同于其包含塊所處的平面內(nèi)。這將影響到通常情況下的“后來(lái)居上”的渲染規(guī)則：變換元素可能會(huì)和其相鄰的其他元素相互交叉。

例子

這個(gè)例子演示了3D變換對(duì)一個(gè)元素的影響。

seo優(yōu)化培訓(xùn),網(wǎng)絡(luò)推廣培訓(xùn),網(wǎng)絡(luò)營(yíng)銷培訓(xùn),SEM培訓(xùn),網(wǎng)絡(luò)優(yōu)化,在線營(yíng)銷培訓(xùn)

 1 <style>  2 div {  3     height: 150px;  4     width: 150px;  5 }  6 .container {  7     border: 1px solid black;  8 }  9 .transformed { 10     transform: rotateY(50deg); 11 } 12 </style> 13  14 <div class="contai