试一试
transform-style: flat;
transform-style: preserve-3d;
<section class="default-example" id="default-example">
<div class="transition-all layer" id="example-element">
<p>Parent</p>
<div class="numeral"><code>rotate3d(1, 1, 1, 45deg)</code></div>
</div>
</section>
.layer {
background: #623e3f;
border-radius: 0.75rem;
color: white;
transform: perspective(200px) rotateY(30deg);
}
.numeral {
background-color: #ffba08;
border-radius: 0.2rem;
color: black;
margin: 1rem;
padding: 0.2rem;
transform: rotate3d(1, 1, 1, 45deg);
}
如果被展平，则元素的子元素将不会在 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 空间中定位。
描述
规范列出了一些分组属性值，这些属性值要求用户代理在应用它们之前创建后代元素的平面表示，因此即使指定了 preserve-3d，也会强制元素将 transform-style: flat 作为其实际值。这些属性值包括：
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。
正式定义
正式语法
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: white;
}
.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
js
const cube = document.getElementById("example-element");
const checkbox = document.getElementById("preserve");
checkbox.addEventListener("change", () => {
cube.style.transformStyle = checkbox.checked ? "preserve-3d" : "flat";
});
结果
规范
| 规范 |
|---|
| CSS 变换模块级别 2 # transform-style-property |
浏览器兼容性
加载中…