以下内容根据官方规范翻译,没有翻译关于SVG变换的内容和关于矩阵计算的内容。

一般情况下,元素在一个无景深无立体感的平面(flat plane)上渲染,这个平面就是其包含块所处的平面。同时,页面上的其他元素也共享这个平面。2D变换函数虽然能改变元素的表现,但是这个被改变的元素仍然是在其包含块所处的平面内被渲染。

3D变换会产生一个变换矩阵,该变换矩阵在Z轴上的分量不为0。结果是把元素渲染到一个不同于其包含块所处的平面内。这将影响到通常情况下的“后来居上”的渲染规则:变换元素可能会和其相邻的其他元素相互交叉。

例子

这个例子演示了3D变换对一个元素的影响。

seo优化培训,网络推广培训,网络营销培训,SEM培训,网络优化,在线营销培训

 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
        
		

网友评论