Perspective()问题用透视固定

Question

我有一个翻转动画，我使用的是透视图，我有一张简单的卡片在悬停时会翻转。从我的理解中，除了将视角应用于父母之外，并且在其子女上渲染，并且perspective((直接应用于您想要的透视元素，这是正确的吗？这是正确的吗？我首先使用了透视属性，然后意识到我可以通过使用Perspective((稍微简化代码，因此我将其更改。使用Perspective((，如果您悬停在卡上，则动画有效，但是如果您在动画开始时将鼠标移开并返回，您会得到一些奇怪的结果，该卡的背面将通过正面显示并且该卡将在屏幕上伸展，所有这些怪异的行为都停止了，当我给卡具有透视属性并删除perspective((时，这是一个浏览器错误，或者我不正确理解差异或有些差异我需要与Perspective((一起使用的其他属性？

CSS的两个版本

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

变换：透视(1000px(;https://fiddle.jshell.net/rqzwoguw/29///////在过渡的开头或中间移动鼠标。

Answer 1

保持态度恒定，不要在悬停上更改它。

只需添加到.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>