CSS属性transform-style决定了元素的子元素是放置在三维空间中还是在元素的平面中展平。
展平时,元素的子元素不会出现在其平面上。在三维空间中拥有自己的属性。
由于该属性不可继承,因此应为指定元素的所有非叶后代设置它。
属性值
CSS 属性transform-style 可以具有以下值之一:
flat:指定元素的子元素放置在元素的平面中。这是默认值。
preserve-3d:指定元素的子元素放置在三维空间中。
适用范围
所有可变形元素。
语法
transform-style = flat | preserve-3d
CSS transform-style: Flat
以下示例演示Transform-Style: Flat 的使用沿边变换函数:
<html>
<head>
<style>
.container {
width: 150px;
height: 150px;
border: none;
display: block;
}
.cube {
width: 30%;
height: 30%;
perspective: 350px;
transform-style: flat;
transform: rotate(30deg);
margin-bottom: 80px;
padding: 30px;
}
.face {
position: absolute;
width: 100px;
height: 100px;
border: 1px solid black;
line-height: 80px;
font-size: 3.5em;
color: white;
text-align: center;
}
.front {
background: rgba(100, 0, 100, 0.2);
transform: translateZ(50px);
}
.back {
background: rgba(178, 178, 0, 0.5);
color: black;
transform: rotateY(180deg) translateZ(50px);
}
.right {
background: rgba(0, 0, 178, 0.5);
transform: rotateY(90deg) translateZ(50px);
}
.left {
background: rgba(178, 0, 0, 0.5);
transform: rotateY(-90deg) translateZ(50px);
}
.top {
background: rgba(0, 200, 0);
transform: rotateX(90deg) translateZ(50px);
}
.bottom {
background: rgba(0, 0, 0, 0.2);
transform: rotateX(-90deg) translateZ(50px);
}
</style>
</head>
<body>
<div class="container">
<div class="cube">
<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>
</div>
</div>
</body>
</html>
CSS Transform-Style: Preserve-3D
下面的例子演示了 Transform-Style: Preserve 的使用-3d使用沿边变换函数:
<html>
<head>
<style>
.container {
width: 150px;
height: 150px;
border: none;
display: block;
}
.cube {
width: 30%;
height: 30%;
perspective: 350px;
transform-style: preserve-3d;
transform: rotate3d(1, 1, 1, 30deg);
margin-bottom: 80px;
padding: 30px;
}
.face {
position: absolute;
width: 100px;
height: 100px;
border: 1px solid black;
line-height: 80px;
font-size: 3.5em;
color: white;
text-align: center;
}
.front {
background: rgba(100, 0, 100, 0.2);
transform: translateZ(50px);
}
.back {
background: rgba(178, 178, 0, 0.5);
color: black;
transform: rotateY(180deg) translateZ(50px);
}
.right {
background: rgba(0, 0, 178, 0.5);
transform: rotateY(90deg) translateZ(50px);
}
.left {
background: rgba(178, 0, 0, 0.5);
transform: rotateY(-90deg) translateZ(50px);
}
.top {
background: rgba(0, 200, 0);
transform: rotateX(90deg) translateZ(50px);
}
.bottom {
background: rgba(0, 0, 0, 0.2);
transform: rotateX(-90deg) translateZ(50px);
}
</style>
</head>
<body>
<div class="container">
<div class="cube">
<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>
</div>
</div>
</body>
</html>