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