CSS3 backface-visibility 属性
CSS3 backface-visibility 属性
CSS3 backface-visibility 属性用于控制元素的背面是否可见。在某些情况下,在旋转元素时,会看到元素背面的部分。但是,有时候我们并不希望用户看到这些背面,这时候就可以使用 backface-visibility 属性。
语法
backface-visibility: visible|hidden|initial|inherit;
属性值
visible
: 默认值。元素的背面是可见的。hidden
: 元素的背面是不可见的。initial
: 把属性设置为它的默认值。inherit
: 从父元素继承此属性。
实例
/*设置元素不可翻转时背面不可见*/
.card {
backface-visibility: hidden;
}
/*提供了一个更多的深度*/
.panel {
backface-visibility: visible;
}
注意事项
- backface-visibility 属性只适用于被设置了旋转的元素。对于未旋转的元素,该属性不起作用。
- 在使用 CSS3 旋转转换时,背面通常是可见的。但是,当使用 backface-visibility 设置为 hidden 时,背面变得不可见。
CSS3 backface-visibility 属性的出现,涉及到剪裁与绘制性能问题。没有很大的需求时,最好不要开启此属性,开启后消耗会比较大。
总的来说,CSS3 backface-visibility 属性是一个非常有用的属性,可以使您的 Web 界面看起来更加美观和专业。