如何解决为什么当我将鼠标悬停在具有 3d 旋转效果的元素上时,它会意外拉伸?
我使用以下代码为元素添加了旋转悬停效果:
变换:透视(600px)rotateY(-25deg);
但是当我悬停在它上面时,我意识到有一个大问题。元素旋转,但有时它会突然快速旋转并拉伸这么多
为什么会发生这种情况,我该如何解决?
.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>
解决方法
您需要首先设置透视图以避免不良影响。这种效果是由于透视和旋转的过渡造成的。
.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>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。