Почему не работает perspective?

Question

У меня есть родитель, которому я задаю perspective и rotateY(60deg). НО "родитель" не выглядит так, как если бы он находился в 3д пространстве. В чем может быть проблема?

.parent {
  width: 300px;
  height: 300px;
  background: yellowgreen;
  transform-style: preserve-3d;
  transform: rotateY(60deg) perspective(200px);
}

.child {
  width: 100px;
  height: 100px;
  background: yellow;
  transform: rotateX(45deg);
}

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

Answer 1

MDN

Если perspective() является одним из мультифункциональных значений, оно должно быть указано первым.

.parent {
  width: 300px;
  height: 300px;
  background: yellowgreen;
  transform-style: preserve-3d;
  margin: 30px;
  transform: perspective(2000px) rotateY(60deg);
}

.child {
  width: 100px;
  height: 100px;
  background: yellow;
  transform: rotateX(45deg);
}

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

БЛОГ НА HUSL

Почему не работает perspective?

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