使用CSS Transition缩放图像 [英] Scaling image with CSS Transition

问题描述

这就是我要缩放图像的方式，平稳无跳。

This is how I want to scale my images, smoothly without any jumps.

我的尝试无法像上面的画廊那样工作，图像（在我的情况下为红色正方形）跳了起来，我的代码：

My attempt does not work like in the gallery above, the image (red square in my case) jumps, my 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 Transition平滑地缩放？

How to fix this? The red square jumps. Is it possible to scale smoothly with CSS Transition at all like in the gallery in the link at the beginning?

推荐答案

您做什么是指跳跃？试试这，是否也跳了？

What do you mean by "jumps"? Try this, jumps too?

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>

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

Also, you could try the variant with a container for an image (like in the first link of your question).

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>

这篇关于使用CSS Transition缩放图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！