transform-style

**transform-style** CSS 属性设置元素的子元素是在 3D 空间中定位还是在元素的平面内扁平化。

试一试

如果扁平化，元素的子元素将不会在 3D 空间中独立存在。

由于此属性不会被继承，因此必须为元素的所有非叶节点子元素设置此属性。

语法

css

/* Keyword values */
transform-style: flat;
transform-style: preserve-3d;

/* Global values */
transform-style: inherit;
transform-style: initial;
transform-style: revert;
transform-style: revert-layer;
transform-style: unset;

值

flat: 指示元素的子元素位于元素本身的平面上。
preserve-3d: 指示元素的子元素应该在 3D 空间中定位。

描述

规范列出了一些分组属性值，这些值要求用户代理在应用这些值之前创建子元素的扁平化表示，因此强制元素具有使用值为 transform-style: flat，即使指定了 preserve-3d。这些属性值包括

overflow: 除了 visible 或 clip 之外的任何值。
opacity: 小于 1 的任何值。
filter: 除了 none 之外的任何值。
clip: 除了 auto 之外的任何值。
clip-path: 除了 none 之外的任何值。
isolation: isolate 的使用值。
mask-image: 除了 none 之外的任何值。
mask-border-source: 除了 none 之外的任何值。
mix-blend-mode: 除了 normal 之外的任何值。
contain: paint 和任何导致绘制包含的其它属性/值组合。这包括影响 contain 属性的使用值的任何属性，例如 content-visibility: hidden。

正式定义

初始值	`flat`
应用于	可转换元素
继承	否
计算值	如指定
动画类型	离散的
创建堆叠上下文	是

正式语法

transform-style = 
  flat         |
  preserve-3d

示例

转换样式演示

在本示例中，我们使用转换创建了一个 3D 立方体。立方体面的父容器默认情况下在其上设置了 transform-style: preserve-3d，因此它在 3D 空间中转换，并且您可以按预期看到它。

我们还提供了一个复选框，允许您在该选项和transform-style: flat之间切换。在这种替代状态下，立方体的面都被展平到其父级的平面，您可能根本看不到它们，具体取决于您使用的浏览器。

HTML

html

<section id="example-element">
  <div class="face front">1</div>
  <div class="face back">2</div>
  <div class="face right">3</div>
  <div class="face left">4</div>
  <div class="face top">5</div>
  <div class="face bottom">6</div>
</section>

<div class="checkbox">
  <label for="preserve"><code>preserve-3d</code></label>
  <input type="checkbox" id="preserve" checked />
</div>

CSS

css

#example-element {
  margin: 50px;
  width: 100px;
  height: 100px;
  transform-style: preserve-3d;
  transform: rotate3d(1, 1, 1, 30deg);
}

.face {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  position: absolute;
  backface-visibility: inherit;
  font-size: 60px;
  color: #fff;
}

.front {
  background: rgb(90 90 90 / 70%);
  transform: translateZ(50px);
}

.back {
  background: rgb(0 210 0 / 70%);
  transform: rotateY(180deg) translateZ(50px);
}

.right {
  background: rgb(210 0 0 / 70%);
  transform: rotateY(90deg) translateZ(50px);
}

.left {
  background: rgb(0 0 210 / 70%);
  transform: rotateY(-90deg) translateZ(50px);
}

.top {
  background: rgb(210 210 0 / 70%);
  transform: rotateX(90deg) translateZ(50px);
}

.bottom {
  background: rgb(210 0 210 / 70%);
  transform: rotateX(-90deg) translateZ(50px);
}

JavaScript

const cube = document.getElementById("example-element");
const checkbox = document.getElementById("preserve");

checkbox.addEventListener("change", () => {
  cube.style.transformStyle = checkbox.checked ? "preserve-3d" : "flat";
});

结果

规范

规范
CSS Transforms Module Level 2 # transform-style-property

浏览器兼容性

BCD 表格仅在浏览器中加载

另请参阅

使用 CSS 转换