CSS 变换 rotateX 的错误有时会旋转太多

Question

在这里你可以看到我在说什么:

.layout{
 width: 600px;
 background-color: #211d1d;
 box-shadow: inset 0 0 24px 9px black;
 display: inline-flex;
}

.square-container{
 position: relative;
 width: 300px;
 height: 260px;
}

.square {
  position: absolute;
  width: 260px;
  height: 210px;
  top: 20px;
  left: 20px;
  border: 1px solid black;
  color: white;
  background: rgb(51, 51, 101);
  background: linear-gradient(
                  153deg,
                  rgba(51, 51, 101, 0.9) 0%,
                  rgba(0, 212, 255, 0.3) 100%
  );
  transition-duration: 0.1s;
  // transition-delay: 0.1s; //helps but not radically
 }
 
 .square-container:hover>.square{
  transform: scale(1.06) perspective(10rem) rotateX(-1deg);
 }

<div class="layout">

<div class="square-container">
  <div class="square">Switch your mouse back annd forth really really fast between me</div>
</div>

<div class="square-container">
  <div class="square">and me and you'll see one of us sometimes spin crazily</div>
<div>

</div>

悬停应该是什么样子：

有时悬停的样子（错误）：

（有时候效果比这个夸张的多得多）

是什么原因造成的，我该如何预防？

Answer 1

这是因为您正在为透视设置动画。为避免这种情况，请使 hover/unhover 状态之间的视角相同，并仅更改其他变换值：

.layout {
  width: 600px;
  background-color: #211d1d;
  box-shadow: inset 0 0 24px 9px black;
  display: inline-flex;
}

.square-container {
  position: relative;
  width: 300px;
  height: 260px;
}

.square {
  position: absolute;
  width: 260px;
  height: 210px;
  top: 20px;
  left: 20px;
  border: 1px solid black;
  color: white;
  background: rgb(51, 51, 101);
  background: linear-gradient( 153deg, rgba(51, 51, 101, 0.9) 0%, rgba(0, 212, 255, 0.3) 100%);
  transition-duration: 0.1s;
  transform: scale(1) perspective(10rem) rotateX(0);
}

.square-container:hover>.square {
  transform: scale(1.06) perspective(10rem) rotateX(-1deg);
}

<div class="layout">

  <div class="square-container">
    <div class="square">Switch your mouse back annd forth really really fast between me</div>
  </div>

  <div class="square-container">
    <div class="square">and me and you'll see one of us sometimes spin crazily</div>
  </div>

</div>

CSS 变换 rotateX 的错误有时会旋转太多

CSS bug with transform rotateX sometimes spins far too much

css

css-transitions

css-transforms

css-animations