变换：scale() 不从中心变换答案

【问题标题】：Transform: scale() not transforming from center变换：scale() 不从中心变换
【发布时间】：2020-08-28 02:37:23
【问题描述】：

当我悬停时，它可以完美缩放，但徽标会向上移动一点。我尝试了 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);
    }
}

【问题讨论】：

transform: translate(); 不是从它所在元素的容器计算，而是从元素本身计算。所以如果你使用transform: translate(-50%, -50%);，它会将元素的一半高度向上移动一半宽度到内联开始（左边，如果不是rtl）

标签： css scale css-transforms

【解决方案1】：

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

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

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

【讨论】：