Свойство transform-style
Свойство transform-style CSS определяет положение дочернего элемента в 3D-пространстве или в той же плоскости, что и родительский элемент. Используется когда нужно трансформировать элементы внутри трансформируемого элемента, например при создании 3D куба.
transform-style: preserve-3d;
Пошаговый план! Как быстро научиться создавать сайты!
- поддерживается начиная с
- частичная поддержка до
- не поддерживается
Значения
transform-style: flat;
Дочерний элемент лежит в той же плоскости, что и родительский.
<div class="example-1">
<div class="example-1-front"></div>
<div class="example-1-back"></div>
</div>
<style>
.example-1 {
width: 200px;
height: 200px;
margin: 50px auto;
transform: rotateX(-30deg) rotateY(-30deg);
transform-style: flat;
}
.example-1-front,
.example-1-back {
width: 200px;
height: 200px;
position: absolute;
}
.example-1-front {
background-color: red;
transform: translateZ(50px);
}
.example-1-back {
background-color: green;
transform: translateZ(-50px);
}
</style>
transform-style: preserve-3d;
Дочерний элемент имеет свое собственное 3D-пространство.
<div class="example-2">
<div class="example-2-front"></div>
<div class="example-2-back"></div>
</div>
<style>
.example-2 {
width: 200px;
height: 200px;
margin: 50px auto;
transform: rotateX(-30deg) rotateY(-30deg);
transform-style: preserve-3d;
}
.example-2-front,
.example-2-back {
width: 200px;
height: 200px;
position: absolute;
}
.example-2-front {
background-color: red;
transform: translateZ(50px);
}
.example-2-back {
background-color: green;
transform: translateZ(-50px);
}
</style>