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

这个例子展示了，在3D渲染上下文中元素是可以相交的。容器元素为自己创建了3D渲染上下文并且他有两个子元素。子元素互相相交，同时橘黄色的元素也与容器相交。

使用立体变换，让一个元素的背面朝着观者是完全有可能的。3D变换元素在两面展示相同的内容，所以反面看起来就像镜子中的正面(就像元素映射在一片镜子上一样)。通常，元素的反面朝着观者都会隐藏。然而，backface-visiblity:hidden属性允许作者使其不可见当元素的反面朝着观者时。如果一个带有backface-visiblity:hidden属性的元素是有效的，那么他的前面和背面便会交替的隐藏，然后，只有当前面朝向观者时元素才是可见的。

理解backface-visibility属性

CSS Code复制内容到剪贴板

.wrap {   

  width: 200px;   

  height: 200px;   

  border: 1px solid black;   

  perspective: 200px;   

  color: #fff;   

  text-align: center;   

  font-size: 50px;   

}   

.inner {   

  width: 50px;   

  height: 50px;   

  margin: 20px auto;   

  background: orange;   

  line-height: 50px;   

  transform: rotateY(180deg);//旋转180   

}  

XML/HTML Code复制内容到剪贴板

<div class="wrap">  

  <div class="inner">2</div>  

</div>  

（编辑：晋中站长网）

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