CSS | 背面可见性

CSS中提供了一些属性可以控制元素的背面可见性，这在实现视觉效果上非常有用。下面将介绍这些属性及其用法。

1. backface-visibility

backface-visibility属性用于控制元素的背面是否可见。默认情况下元素的背面是不可见的，但当元素进行旋转、缩放、移动等变换时，背面会变成可见的。

使用backface-visibility属性可以强制元素的背面保持不可见，即使进行了变换。

语法：

backface-visibility: visible|hidden;

示例：

div {
  width: 100px;
  height: 100px;
  background-color: red;
  transform: rotateY(180deg);
  backface-visibility: hidden;
}

此代码片段旋转了一个红色的100x100像素的div，并使用‘backface-visibility’属性将其背部视图设置为不可见。

2. perspective

‘perspective’定义一个元素被查看时的距离，近大远小。属性被用于定义 3D 空间如何被嵌套到2D 空间中。

当给某个元素设置其父元素的‘perspective’属性时，该元素具有了三维透视效果，可以通过旋转等变换显示三维效果。

语法：

perspective: value;

默认单位为像素（px）。

示例：

.parent {
  perspective: 500px;
}

.child {
  transform: rotateY(45deg);
}

这个代码片段给父元素设置了500像素的透视效果，然后旋转了子元素45度。在透视效果的影响下，子元素看起来有3D立体效果。

3. transform-style

‘transform-style’属性定义子元素如何在3D空间中呈现。如果想要子元素保持在其父元素的平面内，则需要使用‘preserve-3d’值。

语法：

transform-style: flat|preserve-3d;

默认值为 flat。

示例：

.parent {
  perspective: 500px;
  transform-style: preserve-3d;
}

.child {
  transform: rotateY(45deg);
}

此代码片段和前面给出的代码片段相同，但是这里使用了‘preserve-3d’值将子元素的3D效果保留在其父元素的平面内。

结论

上面所介绍的这些属性可以一起使用来创建出很炫的3D效果。但是需要注意的一点是，3D效果不应该在所有的网站中使用，只有在有必要的时候才使用。