如何使用 CSS 将 translateZ( ) 与 rotateY( ) 一起使用？

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

您还需要在 :hover 上指定 rotateY，因为在 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>

如何使用 CSS 将 translateZ( ) 与 rotateY( ) 一起使用？

How to use translateZ( ) transform with rotateY( ) using CSS?

html

css

rotation

translate