深入解读CSS3中transform变换模型的渲染

一个包含在3D渲染上下文的立体变换元素在同样的3D渲染上下文中可以与其他元素相交;参与相同3D渲染上下文的元素，根据它们的变换结果，可能会互相隐藏或者相交。在同样的3D坐标空间摆放，使它们好像全部都是兄弟姐妹。一个元素在立体空间中摆放的位置决定于从建立3D渲染上下文的包含块中积累的变换模型所决定。
EXAMPLE6

CSS Code复制内容到剪贴板

div {   

  height: 150px;   

  width: 150px;   

}   

.container {   

  perspective: 500px;   

  border: 1px solid black;   

  background: #ccc;   

}   

.transformed {   

  transform: rotateY(50deg);   

  background-color: blue;   

}   

.child {   

  transform-origin: top left;   

  transform: rotateX(40deg);   

  background-color: lime;   

}  

JavaScript Code复制内容到剪贴板

<div class="container">   

  <div class="transformed">   

    <div class="child"></div>   

  </div>   

</div>  

（编辑：晋中站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!