怎么做transform图片放大效果

问题描述：

想设置一个transform 放大图片的效果。具体来说就是鼠标经过这个图片让图片整体放大，而不是要放大图片某一个部位。现在还在学div+css静态网页设计，还没学js这些。想各位大佬们解答一下。

答

给页面加上一段CSS即可，可以不需要JS，让鼠标经过图片整体放大，

translateZ 表示正向放大

scale(1.5) 表示放大倍数：

如有帮助请在回答上点个【采纳】

<style>
 img:hover{
    transform:translateZ(0) scale(1.5);
}
</style>
<body>
    <img src="./1.jpg"/>
</body>

答

放大多少倍改scale里面的数字，现在是1.5倍，缩小可改1以下。动画效果改0.5s，

<style>
    .scale:hover {
        transform: scale(1.5);
    transition:all 0.5s;
    }
</style>
<img src="https://avatar.csdnimg.cn/F/2/6/4_qq_58322187_1624086012.jpg" class="scale" />
<img src="https://avatar.csdnimg.cn/F/2/6/4_qq_58322187_1624086012.jpg" class="scale" />
<img src="https://avatar.csdnimg.cn/F/2/6/4_qq_58322187_1624086012.jpg" class="scale" />

答

您好，我是有问必答小助手，您的问题已经有小伙伴解答了，您看下是否解决，可以追评进行沟通哦~

如果有您比较满意的答案 / 帮您提供解决思路的答案，可以点击【采纳】按钮，给回答的小伙伴一些鼓励哦～～

ps:问答VIP仅需29元，即可享受5次/月有问必答服务，了解详情>>>https://vip.csdn.net/askvip?utm_source=1146287632

怎么做transform图片放大效果

相关推荐