透视（）问题解决了透视？答案

【问题标题】：perspective() problems fixed with perspective?透视（）问题解决了透视？
【发布时间】：2017-05-29 03:43:07
【问题描述】：

如果我使用透视，我有一个翻转动画，我有一个在悬停时翻转的简单卡片。根据我的理解，透视属性和变换属性透视（）是相同的，除了透视应用于父级并呈现在其子级上，透视（）直接应用于您想要透视的元素，这是正确的吗？我一开始使用了 perspective 属性，然后意识到我可以通过使用 perspective() 稍微简化我的代码，所以我改变了它。使用perspective()，如果您将鼠标悬停在卡片上，动画会起作用，但是如果您在动画开始时动画结束之前将鼠标移开并重新打开，您会得到一些奇怪的结果，卡片的背面将通过正面显示并且卡片会在屏幕上伸展，当我给卡片一个具有透视属性的父级并删除透视（）时，所有这些奇怪的行为都会停止，这是浏览器错误还是我没有正确理解差异还是有一些我不知道需要与 perspective() 一起使用的其他属性？

两个版本的css和结果

视角：1000px； https://fiddle.jshell.net/rqzwoguw/28/

变换：透视（1000px）； https://fiddle.jshell.net/rqzwoguw/29/ // 在过渡的开始或中间点打开和关闭鼠标。

【问题讨论】：

标签： css css-transitions perspective

【解决方案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>

【讨论】：