CSS ошибка с преобразованием rotateX иногда вращается слишком много - PullRequest
Новая
       122

CSS ошибка с преобразованием rotateX иногда вращается слишком много

1 голос
/ 11 апреля 2020

Здесь вы видите, о чем я говорю: 

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

Как должно выглядеть наведение:

normal effect

На что на мгновение иногда смотрят как (ошибка):

exaggerated distortion

(иногда эффект преувеличен гораздо больше, чем этот)

Что вызывает это и как Могу ли я предотвратить это?

1 Ответ

2 голосов
/ 11 апреля 2020

Это связано с тем, что вы анимируете перспективу. Чтобы избежать этого, сделайте такую ​​же перспективу между состоянием наведения / наведения и измените только другие значения преобразования: 

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