1

У меня есть родитель, которому я задаю 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>

3
  • а как он должен выглядеть?
    – Grundy
    Commented 1 сент. 2020 в 19:32
  • С чего это он у вас вдруг не работает? Поищите в гугле: шайа лабаф на зеленом фоне... Вот он тоже стоит в перспективе в 3д пространстве... но совсем не выглядит как если бы он находился в 3д пространстве... скорее как на плоскости. Как вы думаете, в чем может быть проблема?
    – NoSkill
    Commented 1 сент. 2020 в 20:46
  • 3d пространства в мониторе не может существовать у него же нет глубины нужно комбинировать несколько свойств css чтобы добиться 3d эффекта , например добавив box-shadow он как бы(визуально) парит над родительским элементом
    – Armen
    Commented 2 сент. 2020 в 7:37

1 ответ 1

4

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>

2
  • 2
    Поздравляю с первой тысячей на RuSO! Commented 23 сент. 2020 в 17:14
  • 1
    @Alexandr_TT 👋
    – Eva
    Commented 23 сент. 2020 в 19:14

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.