backface-visibility

backface-visibility 属性规定当元素不面向屏幕时是否可见。如果在旋转元素不希望看到其背面时,该属性很有用。

 

语法

backface-visibility: visible|hidden;

描述
visible背面是可见的。
hidden背面是不可见的。

例子

HTML

<div class="stage1">stage1</div>
<div class="stage2">stage2</div> 

CSS

.stage1,.stage2{
  position:relative;
  display: inline-block;
  height:60px;
  width:60px;
  color:#fff;
  background-color:red;
  transform:rotateY(180deg);
  -webkit-transform:rotateY(180deg); /* Chrome and Safari */
  -moz-transform:rotateY(180deg); /* Firefox */
}
.stage1{
  -webkit-backface-visibility:hidden;
  -moz-backface-visibility:hidden;
  -ms-backface-visibility:hidden;
}
.stage2{
  -webkit-backface-visibility:visible;
  -moz-backface-visibility:visible;
  -ms-backface-visibility:visible;
}

执行结果

stage1
stage2