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>

perspective() 问题已解决？

perspective() problems fixed with perspective?

css

perspective

css-transitions