css3鼠标经过，图片旋转

LX_9

于 2017-09-27 20:41:40 发布

阅读量469

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/lx19971212/article/details/78116988

本文介绍了一种使用CSS实现图片旋转动画的方法。通过:hover伪类和transition及transform属性，在鼠标悬停时可以使图片旋转180度，增强了网页的交互性和视觉效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<style>
        .navigation:hover .img {
            -webkit-transition:0.4s linear;transition:0.4s ease-in;
            -webkit-transform:rotate(180deg);transform:rotate(180deg);
        }
</style>
<div>
<img src="1.png" class='img' />
</div>