- HTML中文网
- 联系QQ：88526
- QQ交流群
- 微信公众号
前端控
更新时间：2019-03-23 11:56:44
backface-visibility属性：
含义：
backface-visibility 属性用于定义当元素不面向屏幕时是否可见
如果在旋转元素不希望看到其背面时，该属性很有用
浏览器支持：
| 属性 |  |  |  |  |  |
|---|---|---|---|---|---|
| backface-visibility | 10.0 | 36.0 12.0 -webkit- | 16.0 10.0 -moz- | 9.0 4.0 -webkit- | 23.0 15.0 -webkit- |
CSS语法：
backface-visibility: visible|hidden;
属性值：
| 值 | 描述 |
| visible | 背面是可见的 |
| hidden | 背面是不可见的 |
div
{
position:relative;
height:100px;
width:100px;
text-align: center;
line-height: 100px;
background-color:pink;
transform:rotateY(180deg);
-webkit-transform:rotateY(180deg); /* Chrome and Safari */
-moz-transform:rotateY(180deg); /* Firefox */
}
#div1
{
-webkit-backface-visibility:hidden;
-moz-backface-visibility:hidden;
-ms-backface-visibility:hidden;
}
#div2
{
-webkit-backface-visibility:visible;
-moz-backface-visibility:visible;
-ms-backface-visibility:visible;
}
</style>
</head>
<body>
<div id="div1">盒一</div>
<div id="div2">盒二</div>点击 "运行实例" 按钮查看在线实例
效果图：
在上面的案例中设置盒一的背面是不可见的，所以当它旋转180度就会消失；而盒二设置的背面可见因此旋转180度后仍然可见
推荐手册