Как использовать преобразование translateZ () с rotateY () с использованием CSS?

Question

Я пытался использовать translateZ с rotateY, чтобы увидеть четкие различия, но как только я наводил курсор на div, извлекается rotateY. Код выглядит следующим образом:

.box {
  width: 350px;
  height: 250px;
  background: tomato;
  transform: rotateY(70deg);
  transition: transform 2s ease;
}

.box:hover {
  transform: perspective(500px) translateZ(300px);
}

<div class="parent">
  <div class="box">Some text</div>
</div>

То же самое происходит, когда я пытаюсь использовать translateX вместо Z. Пожалуйста, помогите ..

Answer 1

Вам также необходимо указать rotateY в :hover, потому что свойство transform в .box:hover переопределит свойство transform в .box

.box {
  width: 350px;
  height: 250px;
  background: tomato;
  transform: rotateY(70deg);
  transition: transform 2s ease;
}

.box:hover {
  transform: perspective(500px) translateZ(300px) rotateY(70deg);
}

<div class="parent">
  <div class="box">Some text</div>
</div>