transform-style是CSS3中用于定义嵌套元素如何在3D空间中呈现的属性，它决定了元素的子元素是被扁平化到父元素的2D平面中，还是保留在3D空间里，是制作复杂3D变换效果的核心属性之一。
transform-style的基本语法
transform-style的语法格式非常简单，它属于可继承属性，默认值为flat，可选值只有两个：
/* 基本语法 */
transform-style: flat | preserve-3d;
/* 使用示例 */
.container {
transform-style: preserve-3d;
}
可选值说明
- flat：默认值，表示所有子元素都会被扁平化到父元素的2D平面中，即使子元素设置了3D变换，也不会呈现出3D空间效果，只会按照2D变换的规则渲染。
- preserve-3d：表示子元素会保留在3D空间中，父元素的3D变换会影响所有子元素，子元素之间的3D位置关系会正常呈现，这是实现多层3D效果的关键值。
使用transform-style的注意事项
要让transform-style生效，需要满足几个前提条件：
- 父元素必须设置了
transform相关的3D变换属性，或者设置了perspective属性，否则preserve-3d的效果无法体现。 - 如果父元素设置了
overflow属性且值不为visible，那么transform-style会被强制重置为flat，无法保留3D空间。 - 该属性只对直接子元素生效，嵌套更深的后代元素需要逐层设置preserve-3d才能保留3D效果。
实际代码示例
下面通过一个3D立方体的示例来演示transform-style的具体用法，这个示例会创建一个可以旋转的立方体，六个面都保留在3D空间中：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>3D立方体示例</title>
<style>
/* 场景容器，设置透视距离 */
.scene {
width: 200px;
height: 200px;
margin: 100px auto;
perspective: 800px;
}
/* 立方体容器，设置preserve-3d保留子元素3D空间 */
.cube {
width: 100%;
height: 100%;
position: relative;
transform-style: preserve-3d;
transform: rotateX(-15deg) rotateY(15deg);
animation: rotate 8s infinite linear;
}
/* 立方体的六个面通用样式 */
.face {
position: absolute;
width: 200px;
height: 200px;
background: rgba(0, 150, 255, 0.7);
border: 2px solid #fff;
display: flex;
align-items: center;
justify-content: center;
font-size: 30px;
color: #fff;
}
/* 前面 */
.front {
transform: translateZ(100px);
}
/* 后面 */
.back {
transform: translateZ(-100px) rotateY(180deg);
}
/* 右面 */
.right {
transform: rotateY(90deg) translateZ(100px);
}
/* 左面 */
.left {
transform: rotateY(-90deg) translateZ(100px);
}
/* 上面 */
.top {
transform: rotateX(90deg) translateZ(100px);
}
/* 下面 */
.bottom {
transform: rotateX(-90deg) translateZ(100px);
}
/* 旋转动画 */
@keyframes rotate {
from {
transform: rotateX(-15deg) rotateY(0deg);
}
to {
transform: rotateX(-15deg) rotateY(360deg);
}
}
</style>
</head>
<body>
<div class="scene">
<div class="cube">
<div class="face front">前</div>
<div class="face back">后</div>
<div class="face right">右</div>
<div class="face left">左</div>
<div class="face top">上</div>
<div class="face bottom">下</div>
</div>
</div>
</body>
</html>
在这个示例中，.cube容器设置了transform-style: preserve-3d，所以它的六个子元素（立方体的六个面）都保留在3D空间中，通过不同的translateZ和rotate变换，分别定位到立方体的不同位置，最终组合成一个完整的3D立方体。如果去掉这个属性，所有面都会被扁平化到2D平面，无法形成立方体效果。
常见问题解答
为什么设置了preserve-3d还是没有3D效果？
首先检查父元素是否设置了perspective或者3D变换，其次检查父元素是否有overflow非visible的设置，最后确认是否是直接子元素，嵌套层级过深需要逐层设置preserve-3d。
transform-style和perspective的区别是什么？
perspective是设置观察者与3D元素之间的距离，决定3D效果的透视强度，而transform-style是决定子元素是否保留3D空间，两者通常搭配使用，perspective一般设置在3D容器的父级元素上，transform-style设置在3D容器本身上。
transform-styleCSS_3D_transformperspective3D_transform修改时间：2026-07-12 08:15:28