变换：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);
    }
}

调整原始值后，我忘记调整悬停。