CSS3 backface-visibility 属性
说明
backface-visibility CSS 属性确定在面对用户时转换元素的"背面"是否可见。
下表总结了此属性的使用上下文和版本历史记录。
| 默认值： | visible |
|---|---|
| 适用于： | 可变形元素 |
| 继承： | No |
| 动画： | No. 参见动画属性。 |
| 版本： | New in CSS3 |
语法
属性的语法如下：
下面的示例显示了 backface-visibility 属性的作用。
.flip-container {
margin: 50px;
perspective: 1000px;
display: inline-block;
}
.flip-container:hover .card {
transform: rotateY(180deg);
}
.card, .front, .back {
width: 130px;
height: 195px;
}
.card {
position: relative;
transition: 0.5s all;
transform-style: preserve-3d;
}
.front, .back {
position: absolute;
backface-visibility: hidden;
}
.front {
z-index: 1;
transform: rotateY(180deg);
}
.back {
z-index: 2;
transform: rotateY(0deg);
}注意： backface-visibility 属性对于创建旋转硬币或翻转卡片等动画非常有用，其中两个不同的图像（即正面和背面）混合在一起以创建 更好的3D旋转效果。
属性值
下表描述了该属性的值。
| 值 | 说明 |
|---|---|
visible |
指定背面可见，允许正面显示镜像。 这是默认值。 |
hidden |
指定背面不可见，隐藏正面。 |
initial |
将此属性设置为其默认值。 |
inherit |
如果指定，则关联元素采用其父元素 backface-visibility 属性的 计算值。 |
浏览器兼容性
所有主要的现代浏览器都支持 backface-visibility 属性。
 |
基本支持—
|
进一步阅读
请参阅以下教程： CSS3 过渡, CSS3 3D 转换, CSS3 动画.
相关属性： perspective, perspective-origin, transform, transform-origin, transform-style, transition.
Advertisements