Css 变换：缩放（）不从中心变换

当我悬停时，它可以完美缩放，但徽标会向上移动一点。我尝试了“变换原点：中心”（即使这是默认设置），但没有任何更改

HTML

---

哇。所以我只需要把它改成这个

.project:hover {
    img {
        transform: translate(-50%,-35%) scale(.9);
    }
}

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

transform:translate（）不是从放置它的元素的容器计算，而是从元素本身计算。因此，如果使用
transform:translate（-50%，-50%）它会将元素的一半高度向上移动，一半宽度向内联起始位置移动（如果不是
rtl
，则向左移动）
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);
    }
}