Свойство 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>

Читайте также

Обсуждение (0)

Войдите или зарегистрируйтесь для того чтобы оставлять комментарии