此页面由社区从英文翻译而来。了解更多并加入 MDN Web Docs 社区。
transform-style
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since 2015年9月.
CSS 属性 transform-style 设置元素的子元素是位于 3D 空间中还是平面中。
尝试一下
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: #000;
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: unset;
值
flat-
设置元素的子元素位于该元素的平面中。
preserve-3d-
指示元素的子元素应位于 3D 空间中。
正式语法
transform-style =
flat |
preserve-3d
规范
| Specification |
|---|
| CSS Transforms Module Level 2 # transform-style-property |
| 初始值 | flat |
|---|---|
| 适用元素 | 可变换元素 |
| 是否是继承属性 | 否 |
| 计算值 | as specified |
| 动画类型 | 离散值 |
| Creates stacking context | 是 |
浏览器兼容性
Loading...