您好，登录后才能下订单哦！
密码登录
登录注册
点击 登录注册 即表示同意《亿速云用户服务条款》
这篇文章主要介绍CSS怎么设置图片放大效果，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！
思路：图片放大的动画效果还是由transition和transform实现。先设置 div 的初始位置，过渡的时间等，之后设置 translate，scale，rotate 等属性。
translate：代表水平和垂直的移动；
scale：代表水平和垂直同时缩放；
rotate：表示旋转的角度。
具体代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS图片放大 - 亿速云(yisu.com)</title>
<style>
div {
width: 200px;
height: 100px;
transition: all .3s;
}
div:hover {
transform: translate(100px, 100px) scale(2) rotate(0deg);
}
</style>
</head>
<body>
<div>
<img src="https://7n.yisu.com/statics/img/logo/indexlogo@2x.png" alt="w3cschool">
</div>
</body>
</html>以上是“CSS怎么设置图片放大效果”这篇文章的所有内容，感谢各位的阅读！希望分享的内容对大家有帮助，更多相关知识，欢迎关注亿速云行业资讯频道！
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。