Question

我有一个翻转动画，我使用透视图，我有一张简单的卡片在翻转时翻转。根据我的理解，perspective属性和transform属性perspective（）是相同的，除了透视应用于父级并在其子级上呈现，并且perspective（）直接应用于您想要透视的元素，这是正确的吗？我首先使用了perspective属性然后意识到我可以使用perspective（）稍微简化我的代码，所以我改变了它。使用perspective（）如果你将鼠标悬停在卡片上，则动画可以正常工作，但是如果你在动画开头动画完成之前关闭并重新开启鼠标，你会得到一些奇怪的结果，卡片的背面会显示在前面当卡片给父母带有透视属性并删除透视图（）时，所有这些奇怪的行为都会停止，所有这些奇怪的行为都会停止，所以这是浏览器错误还是我没有正确理解差异或是否有一些其他属性我需要使用perspective（），我不知道吗？

带有结果的两个css版本

透视：1000px; https://fiddle.jshell.net/rqzwoguw/28/

transform：perspective（1000px）; https://fiddle.jshell.net/rqzwoguw/29/ //在过渡的开始或中间点开启和关闭鼠标。

Answer 1

保持pespective恒定，不要在悬停时更改它。

只需添加到.card :(没有轮换，但是你在悬停时设置的相同）

transform: perspective(1000px) rotateY(0deg);

.front,
.back,
.card {
  width: 100px;
  height: 170px;
  border-radius: 10px;
  text-align: center;
}

.card {
  position: relative;
  transition: transform 1s ease-in-out 0s;
  transform-style: preserve-3d;
  transform-origin: right;
  transform: perspective(1000px) rotateY(0deg);
}

.card:hover {
  transform: perspective(1000px) rotateY(180deg);
}

.front {
  background-color: red;
}

.back {
  background-color: blue;
  transform: rotateY(180deg);
  position: absolute;
  top: 0px;
  z-index: -1;
}

<div class="card">
  <div class="front">
    FRONT
  </div>
  <div class="back">
    BACK
  </div>
</div>

perspective（）透视问题？

1 个答案: