变换样式属性
最后更新：2026-09-13
transform-style 变换样式属性
transform-style 用于决定元素的子元素是否保留其 3D 空间位置。默认值为 flat，子元素被压平到父元素的 2D 平面中；设为 preserve-3d 后，子元素可以在独立的 3D 空间中定位，配合 perspective 能构建真正的立体场景。
| 分类 | |
|---|---|
| 初始值 | flat |
| 继承 | 否 |
| 适用于 | |
| 可动画 | |
| CSS 版本 | CSS3 |
| 状态 | 标准 |
📝 语法
transform-style: flat | preserve-3d;⚙️ 取值
| 值 | 类型 | 描述 |
|---|---|---|
flat | preserve-3d | 关键字 | 子元素是否保留 3D |
▶ 示例
编辑下方代码，在 playground 中查看实时效果：
🌐 浏览器支持
| 浏览器 |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| transform-style | ✓ v36 | ✓ v12 | ✓ v16 | ✓ v9 | ✓ v23 |
| 所有主流浏览器均支持 | |||||
重要： preserve-3d 不能继承，必须在需要保留 3D 的父元素上显式设置；同时该父元素通常需要配合 perspective 才能看到立体效果。
注意： overflow: hidden、opacity、filter 等属性会强制创建新的平面上下文，可能破坏 preserve-3d 的立体效果。
❓ 常见问题
Q什么时候需要用 preserve-3d？
A当子元素需要在父元素的 3D 空间中有「深度」时，如 3D 立方体、卡片翻转、多层卡片叠放。普通的平面变换（平面旋转、缩放、位移）用默认的 flat 即可，flat 会把所有子元素压平到父元素所在平面，视觉上只有 2D 效果。
Q为什么设置了 preserve-3d 还是看不到立体效果？
A最常见的原因是缺少 perspective：没有透视就没有近大远小，旋转后看不到纵深。其次是父元素或祖先元素上有 overflow: hidden、opacity < 1、filter 等属性，它们会强制把 3D 空间「拍平」成平面。逐一排查这两点通常就能解决。
Qpreserve-3d 和 perspective 有什么区别？
Aperspective 定义观察者到 z=0 平面的距离，决定透视强度，可写在父元素上统一影响所有 3D 子元素，也可作为 transform: perspective() 函数单独作用于某元素；transform-style: preserve-3d 决定子元素是否保留 3D 位置。两者配合才能实现真正的立体场景。
Qtransform-style: preserve-3d 的浏览器兼容性如何？
A所有现代浏览器都支持 preserve-3d，但 Safari 对 3D 变换的历史支持有差异，个别组合下可能被强制降级为 flat。遇到 Safari 上 3D 失效，可在子元素上直接用 3D 变换并配合 perspective() 函数，绕开对父级 3D 上下文的依赖。
🏷️ 相关属性
💡 相关案例
📚 相关教程
