transform-style
CSS
property sets whether children of an element are positioned in the 3D space or are flattened in the plane of the element.
The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
If flattened, the element's children will not exist on their own in the 3D-space.
As this property is not inherited, it must be set for all non-leaf descendants of the element.
/* Keyword values */ transform-style: flat; transform-style: preserve-3d; /* Global values */ transform-style: inherit; transform-style: initial; transform-style: unset;
flat
Indicates that the children of the element are lying in the plane of the element itself.
preserve-3d
Indicates that the children of the element should be positioned in the 3D-space.
| 初始值 |
flat
|
|---|---|
| 适用于 | transformable elements |
| 继承 | no |
| 计算值 | 如指定 |
| 动画类型 | discrete |
| Creates stacking context | yes |
flat | preserve-3d
In this example we have a 3D cube created using transforms. The parent container of the cube faces has
transform-style: preserve-3d
set on it by default, so it is transformed in the 3D space and you can see it as intended.
We also provide a checkbox allowing you to toggle between this, and
transform-style: flat
. In this alternative state, the cube faces are all flattened onto the plane of their parent, and you might not be able to see them at all, depending on the browser you are using.
<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>
#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: rgba(90,90,90,.7);
transform: translateZ(50px);
}
.back {
background: rgba(0,210,0,.7);
transform: rotateY(180deg) translateZ(50px);
}
.right {
background: rgba(210,0,0,.7);
transform: rotateY(90deg) translateZ(50px);
}
.left {
background: rgba(0,0,210,.7);
transform: rotateY(-90deg) translateZ(50px);
}
.top {
background: rgba(210,210,0,.7);
transform: rotateX(90deg) translateZ(50px);
}
.bottom {
background: rgba(210,0,210,.7);
transform: rotateX(-90deg) translateZ(50px);
}
const cube = document.getElementById('example-element');
const checkbox = document.getElementById('preserve');
checkbox.addEventListener('change', () => {
if(checkbox.checked) {
cube.style.transformStyle = 'preserve-3d';
} else {
cube.style.transformStyle = 'flat';
}
})
| 规范 | 状态 | 注释 |
|---|---|---|
|
CSS Transforms Level 2
The definition of 'transform-style' in that specification. |
编者草案 | 初始定义。 |
| Desktop | Mobile | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
transform-style
|
Chrome 完整支持 36 | Edge 完整支持 12 |
Firefox
完整支持
16
|
IE 不支持 No | Opera 完整支持 23 | Safari 完整支持 9 | WebView Android 完整支持 37 | Chrome Android 完整支持 36 |
Firefox Android
完整支持
16
|
Opera Android 完整支持 24 | Safari iOS 完整支持 9 | Samsung Internet Android 完整支持 3.0 |
完整支持
不支持
用户必须明确启用此特征。
要求使用供应商前缀或不同名称。