如何使用 CSS 使用 translateZ() 变换和 rotateY()？

【问题标题】：How to use translateZ( ) transform with rotateY( ) using CSS?如何使用 CSS 使用 translateZ() 变换和 rotateY()？
【发布时间】：2020-09-16 13:20:12
【问题描述】：

我试图将 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 时也会发生同样的事情。请帮助..

【问题讨论】：

标签： html css rotation translate

【解决方案1】：

您还需要在:hover 上指定rotateY，因为.box:hover 中的transform 属性将覆盖.box 中的transform 属性

.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>

【讨论】：