html - 为什么当我将鼠标悬停在这个具有 3d 旋转效果的元素上时，它会意外拉伸？

Question

我使用以下代码向元素添加了旋转悬停效果：

变换：透视（600px）旋转Y（-25度）；

但是当我悬停在它上面时，我意识到有一个大问题。元素旋转，但有时它会突然快速移动并拉伸很多
为什么会发生这种情况，我该如何解决？

代码笔

.container{
    display: flex;
    justify-content: space-between;
    background-color: khaki;
    margin: 20% auto;
    width: 80%;
}

.text{
    margin: 20px;
    width: 110%;
}

.rotation{
    position: relative;
    width: 200px;
    height: 200px;
    transition-duration: .3s;
    background-color: coral;
    text-align: center;
    font-size: 18px;
}

.test{
    background-color: lightblue;
}

.test:hover .rotation{
    transform: perspective(600px) rotateY(-25deg);
}

.message{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

<div class="container">
        <div class="text">  
            Lorem ipsum dolor sit amet consectetur adipisicing elit. 
enter code hereExpedita cumque modi et tenetur, consectetur dicta 
molestias corporis, eligendi.
        </div>
        <div class="test">
        
            <div class="rotation">
                <div class="message">
                keep hovering on me until you see the problem
                </div>
            </div>
            
        </div>
    </div>

Answer 1

您需要首先设置透视图以避免不良影响。这种效果是由于透视和旋转的过渡。

.container {
  display: flex;
  justify-content: space-between;
  background-color: khaki;
  margin: 20% auto;
  width: 80%;
}

.text {
  margin: 20px;
  width: 110%;
}

.rotation {
  position: relative;
  width: 200px;
  height: 200px;
  transition-duration: .3s;
  background-color: coral;
  text-align: center;
  font-size: 18px;
  transform: perspective(600px) rotateY(0); /* added */
}

.test {
  background-color: lightblue;
}

.test:hover .rotation {
  transform: perspective(600px) rotateY(-25deg);
}

.message {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

<div class="container">
  <div class="text">
    Lorem ipsum dolor sit amet consectetur adipisicing elit. enter code hereExpedita cumque modi et tenetur, consectetur dicta molestias corporis, eligendi.
  </div>
  <div class="test">

    <div class="rotation">
      <div class="message">
        keep hovering on me until you see the problem
      </div>
    </div>

  </div>
</div>