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 界面看起来更加美观和专业。