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

2022-01-22 00:00:00 rotation hover html css

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

I added a rotational hover effect to an element with this code:

变换:透视(600px)rotateY(-25deg)；

transform: perspective(600px) rotateY(-25deg);

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

but when I hovered on it I realized there's a big problem. the element rotates but sometimes it rotates with a sudden rapid movement and stretches so much
why is this happening and how can I fix this?

codePen

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

推荐答案

需要先设置好视角，以免造成不良影响.这种效果是由于透视和旋转的过渡.

You need to set the perspective initially to avoid the bad effect. That effect is due to the the transition of the perspective and rotation.

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

相关文章