CSS backface-visibility 属性值说明
| 值 | 描述 |
|---|---|
| visible | 背面是可见的。它是默认值。 |
| hidden | 背面不可见。 |
| initial | 将属性设置为默认值。 |
| inherit | 从其父元素继承属性。 |
语法
backface-visibility: visible | hidden | initial | inherit;
具有“可见”值的backface-visibility属性示例：
<!DOCTYPE html>
<html>
<head>
<title>The title of the document</title>
<style>
.element {
width: 200px;
height: 200px;
background: #666;
color: #eee;
backface-visibility: visible;
-webkit-animation: element 2s infinite linear alternate;
animation: element 2s infinite linear alternate;
}
@-webkit-keyframes element {
to {
-webkit-transform: rotateY(180deg);
}
}
</style>
</head>
<body>
<h2>Backface-visibility 属性示例</h2>
<div class="element">
<h2>Hello world!</h2>
</div>
</body>
</html>
具有“隐藏”值的backface-visibility属性示例：
<!DOCTYPE html>
<html>
<head>
<title>The title of the document</title>
<style>
.element {
width: 200px;
height: 200px;
background: #1c87c9;
color: #8ebf42;
backface-visibility: hidden;
-webkit-animation: element 2s infinite linear alternate;
animation: element 2s infinite linear alternate;
}
@-webkit-keyframes element {
to {
-webkit-transform: rotateY(180deg);
}
}
</style>
</head>
<body>
<h2>An example with hidden value</h2>
<div class="element">
<h2>Hello world!</h2>
</div>
</body>
</html>
backface-visibility 是一个 CSS 属性，它定义元素的背面是否应该可见。
元素的背面是正面的镜像。
如果元素被旋转，我们可以选择是否向用户显示元素的背面。
两个值指定此属性：可见和隐藏。
backface-visibility 属性是 CSS3 属性之一。
“可见”值使用户可以看到背面。
“隐藏”值使背面有效隐藏。
| 初始值 | visible |
|---|---|
| 应用于 | 可变形元素。 |
| 继承 | 无效 |
| 可动画的 | 无效 |
| 版本 | CSS3. |
| DOM 语法 | object.Style.BackFacebibility =“hidden”; |
日期：2020-06-02 22:14:24 来源：oir作者：oir