缩放图像与CSS过渡

Question

这就是我想要的缩放图像的方式，平滑而没有任何跳跃。

我的尝试不像在上面的画廊，图像(红色方块在我的情况下)跳跃，我的 code:

section {
    background-color: rgba(0, 0, 0, 0.701961);
    width: 400px;
    height: 400px;
}
div {
    position: absolute;
    top: 120px;
    left: 120px;
    width: 160px;
    height: 160px;
    background-color: red;
    -webkit-transition: all .2s ease-in-out;
}
div:hover {
    -webkit-transform: scale(1.8);
}

<section>
    <div></div>
</section>

如何解决这个问题?红色方块跳跃。是否有可能平滑地缩放CSS过渡在所有像在画廊在开始的链接?

Answer 1

你说的"跳跃"是什么意思?试试这个，也跳?

section {
    background-color: rgba(0, 0, 0, 0.701961);
    width: 400px;
    height: 400px;
}
div {
    position: absolute;
    top: 120px;
    left: 120px;
    width: 160px;
    height: 160px;
    background-color: red;
    -webkit-transition: -webkit-transform 0.4s;
    transition: transform 0.4s;
}
    div:hover {
        -webkit-transform: scale(1.8) rotate(0.01deg);
        transform: scale(1.8) rotate(0.01deg);
    }

<section>
    <div></div>
</section>

此外，您可以尝试使用图像容器的变体(如您的问题的第一个链接)。

JSFiddle

.banner {
    position: relative;
    z-index: 1;
    cursor: pointer;
    border: 1px solid #dfe2e5;
    background: #000;
    width: 310px;
    height: 150px;
    -webkit-transition: border-color 0.1s;
    transition: border-color 0.1s;
    overflow: hidden;
}
    .banner:hover {
        border-color: #bdc1c5;
    }
    .banner__image-container {
        overflow: hidden;
        height: 100%;
    }
    .banner__image {
        -webkit-transition: all 0.4s;
        transition: all 0.4s;
    }
        .banner:hover .banner__image {
            -webkit-transform: scale(1.15) rotate(0.01deg);
            transform: scale(1.15) rotate(0.01deg);
            opacity: 0.5;
        }

<div class="banner">
    <div class="banner__image-container">
        <img class="banner__image" src="https://picsum.photos/310/150/?image=1022"/>
    </div>
</div>

Answer 2

我有时通过在transform属性上添加rotate(0.01deg)来解决过渡时的奇怪跳跃，如下所示:

.element:hover {
    transform: scale(1.5) rotate(0.01deg);
}