Как работает transform-style?

Question

Как я понимаю, transform-style: preserve-3d; задается непосредственно самому элементу и "включает" у него 3д пространство. Но лично я совершенно не вижу разницы с использованием transform-style: preserve-3d; и без использования transform-style: preserve-3d;.

У меня есть два примера:

Используется transform-style: preserve-3d;– у элемента есть свое 3д пространство;

.parent {
  width: 60%;
  height: 300px;
  border: 1px solid black;
  display: flex;
  justify-content: space-around;
  perspective: 600px;
}

.child {
  width: 50px;
  height: 50px;
  background: yellowgreen;
  display: inline-block;
  transform: rotateY(45deg);
  transform-style: preserve-3d;
}

.child:hover {
  transform: rotateX(-360deg);
}

<div class="parent">
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
</div>

Не используется transform-style: preserve-3d; – у элемента нет своего 3д пространства;

.parent {
  width: 60%;
  height: 300px;
  border: 1px solid black;
  display: flex;
  justify-content: space-around;
  perspective: 600px;
}

.child {
  width: 50px;
  height: 50px;
  background: yellowgreen;
  display: inline-block;
  transform: rotateY(45deg);
}

.child:hover {
  transform: rotateX(-360deg);
}

<div class="parent">
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
</div>

В чем разница? Выглядят два примера совершенно одинаково. Заранее спасибо

Answer 1

Свойство transform-style CSS определяет положение дочернего элемента в 3D-пространстве или в той же плоскости, что и родительский элемент. flat - показывает, что дочерний элемент лежит в той же плоскости, что и родительский. preserve-3d - показывает, что дочерний элемент должен быть спозиционирован в 3D-пространстве.

.div1 {
  position: relative;
  width: 200px; height: 100px;
  margin-bottom: 30px;
}


.div2 {
  padding: 20px;
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  border: 1px solid black;
  background-color: silver;
  animation: 5s infinite example;
  transform-style: flat;
}
.div2.pres {
  transform-style: preserve-3d;
}

.div3 {
  padding: 20px;
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  border: 1px solid black;
  background-color: yellow;
  transform: rotateY(60deg);
}

@keyframes example {
   0% { transform: rotateX(  0deg) rotateY(  0deg); }
  25% { transform: rotateX(180deg) rotateY( 90deg); }
  50% { transform: rotateX(360deg) rotateY(180deg); }
  75% { transform: rotateX(540deg) rotateY(270deg); }
 100% { transform: rotateX(720deg) rotateY(360deg); }
}

<div class="div1">
  <div class="div2">
    <div class="div3"></div>
  </div>
</div>

<div class="div1">
  <div class="div2 pres">
    <div class="div3"></div>
  </div>
</div>

БЛОГ НА HUSL

Как работает transform-style?

Ответы (1 шт):