試一試
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 |
瀏覽器相容性
載入中…