用途
backface-vidibility 属性规定当元素不面向屏幕时是否可见。如果在旋转元素不希望看到其背面时,该属性很有用。
语法
代码语言:javascript复制backface-visibility: visible|hidden;
值
值 | 描述 |
---|---|
visible | 背面是可见的。 |
hidden | 背面是不可见的。 |
例子
代码语言:javascript复制/* 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;
}
执行结果