以下内容根据官方规范翻译,没有翻译关于SVG变换的内容和关于矩阵计算的内容。
一般情况下,元素在一个无景深无立体感的平面(flat plane)上渲染,这个平面就是其包含块所处的平面。同时,页面上的其他元素也共享这个平面。2D变换函数虽然能改变元素的表现,但是这个被改变的元素仍然是在其包含块所处的平面内被渲染。
3D变换会产生一个变换矩阵,该变换矩阵在Z轴上的分量不为0。结果是把元素渲染到一个不同于其包含块所处的平面内。这将影响到通常情况下的“后来居上”的渲染规则:变换元素可能会和其相邻的其他元素相互交叉。
例子
这个例子演示了3D变换对一个元素的影响。
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


