如何解决变换:scale不从中心变换
当我将鼠标悬停时,它可以完美缩放,但徽标会稍微向上移动。我尝试了transform-origin:center(即使这是默认设置)也没有任何改变。
HTML
<div class="portfolio-projects">
<div class="project">
<img src="#" alt="">
</div>
</div>
CSS
portfolio-projects {
display: grid;
grid-gap: 50px;
margin: 50px 0;
max-width: 1050px;
.project {
position: relative;
cursor: pointer;
background-color: $gray;
max-width: 500px;
height: 325px;
overflow: hidden;
}
img {
position: absolute;
top: 35%;
left: 50%;
transform: translate(-50%,-35%) scale(.8);
transition: .2s;
}
.project:hover {
img {
transform: translate(-50%,-50%) scale(.9);
}
}
解决方法
哇。所以我只需要将其更改为此
.project:hover {
img {
transform: translate(-50%,-35%) scale(.9);
}
}
调整原始值后,我忘记调整悬停。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。