html - 为什么当我将鼠标悬停在这个具有 3d 旋转效果的元素上时,它会意外拉伸?
问题描述
我使用以下代码向元素添加了旋转悬停效果:
变换:透视(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>
解决方案
您需要首先设置透视图以避免不良影响。这种效果是由于透视和旋转的过渡。
.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>
推荐阅读
- lua - G19罗技重复键lua脚本
- mysql - 从下表中找出 2 月份入职的员工姓名
- c# - log4net:如何从 SQL Server 数据库中读取配置?
- ruby - 您没有 /usr/lib/ruby/gems/2.7.0 目录的写权限(Alpine linux docker image)
- docker - 无法从同一网络中的另一个容器访问 Postgress(在容器中)
- python-3.x - 使用 MDToolbar 时出现 Kivymd 参考错误
- android - 新的沉浸式模式实现在 Android 11 中不包括(使用)状态栏
- java - 在Java中根据它们的大小附加列表
- python - 您如何在 Google Collab 中缩进 - Windows
- typescript - noFallthroughCasesInSwitch - 明确允许通过