css - perspective() 问题已解决？

Question

如果我使用透视，我有一个翻转动画，我有一个简单的卡片，当鼠标悬停时会翻转。根据我的理解，透视属性和转换属性 perspective() 是相同的，只是透视应用于父级并在其子级上呈现，而 perspective() 直接应用于您想要透视的元素，这是正确的吗？我首先使用了 perspective 属性，然后意识到我可以通过使用 perspective() 稍微简化我的代码，所以我改变了它。使用 perspective() 如果您将鼠标悬停在卡片上，动画会起作用，但是如果您在动画开始之前将鼠标关闭并重新打开，您会得到一些奇怪的结果，卡片的背面将显示在前面并且卡片会在屏幕上拉伸(stretch)，当我给卡片一个具有透视属性的父级并删除 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>