时间戳

首页 > 解决方案 > 带有 transform rotateX 的 CSS 错误有时会旋转太多

css - 带有 transform rotateX 的 CSS 错误有时会旋转太多

问题描述

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

.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>

悬停应该是什么样子：

正常效果

短暂的悬停有时看起来像（错误）：

夸张的失真

（有时效果被夸大得多）

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

标签： csscss-animationscss-transitionscss-transforms

解决方案

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

.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>

推荐阅读