【CSS3】CSS3 3D 转换 ⑤ ( 3D 呈现效果 - transform-style 属性 | transform-style 属性语法 | 设置透视视图效果 | 结构伪类选择器 )

作者：System 时间：2024年08月10日分类：所有,css3 字数：519

在 CSS3 中，transform-style 属性用于指定嵌套元素如何在 3D 空间中呈现。它的主要目的是定义子元素是否需要保持 3D 位置，还是在 2D 平面上进行。

transform-style 属性可以接受两个值：

使用 transform-style 属性时，需要将其放在父元素上。

示例代码：




/* 定义父元素为 3D 空间 */
.parent {
  transform-style: preserve-3d;
}
 
/* 定义子元素在 2D 平面上呈现 */
.child {
  transform-style: flat;
}

在这个例子中，.parent 是一个 3D 空间，其子元素将保持其 3D 位置。而 .child 是一个 2D 平面，其子元素不会保持其 3D 位置，而是在 2D 平面上进行变换。