css - 如何修复生涩的、跳帧的 CSS3：Chrome 中变换属性的悬停过渡？适用于所有其他浏览器

Question

这是问题的 JSFiddle

这是我的 HTML：

<div class="shot">

</div>

这是CSS：

.body {
  background-color: #ecf1ff; }

.shot {
  position: relative;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  width: 400px;
  height: 300px;
  background-color: #ff8346;
  -webkit-transition: all 0.5s ease-in-out;
  -moz-transition: all 0.5s ease-in-out;
  -o-transition: all 0.5s ease-in-out;
  -ms-transition: all 0.5s ease-in-out;
  transition: all 0.5s ease-in-out; }


.shot:hover {
  -webkit-transform: perspective(600px) rotateX(45deg);
  -moz-transform: perspective(600px) rotateX(45deg);
  -o-transform: perspective(600px) rotateX(45deg);
  -ms-transform: perspective(600px) rotateX(45deg);
  transform: perspective(600px) rotateX(45deg);
  -webkit-transition: all 0.5s ease-in-out;
  -moz-transition: all 0.5s ease-in-out;
  -o-transition: all 0.5s ease-in-out;
  -ms-transition: all 0.5s ease-in-out;
  transition: all 0.5s ease-in-out; }

这在 Firefox、Safari 和 IE 中运行良好……在 Chrome 中，它似乎首先将矩形“压扁”，然后在最后一帧应用透视。它没有正确地转换视角。这是一个已知问题还是我做错了什么？

Answer 1

只需将透视图也添加到基本（未悬停）元素。

纠正小提琴

添加了 CSS：

.shot {
    -webkit-transform: perspective(600px);
}

问题是基本元素中的透视是未定义的；不同的浏览器可以用不同的方式处理这个问题。