css 实现图片旋转

最新推荐文章于 2024-07-18 15:37:29 发布

清晨一场梦

最新推荐文章于 2024-07-18 15:37:29 发布

阅读量2.7w

点赞数 7

分类专栏： html5 文章标签：图片旋转 css 效果

本文链接：https://blog.csdn.net/zyddj123/article/details/81489364

版权

html5 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

鼠标放在图片上旋转180度可用在头像上比较俏皮效果如下：

这里写图片描述

代码如下：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
    div,img,body{
        margin: 0;
        padding: 0;
    }
    img.touxiang:hover{
        transform: rotate(180deg);
        -webkit-transform: rotate(180deg);
        -moz-transform: rotate(180deg);
        -o-transform: rotate(180deg);
        -ms-transform: rotate(180deg);
    }
    img.touxiang{
        margin: 0 auto;
        display: block;
        transition: all 0.2s ease-in-out;
        -webkit-transition: all 0.2s ease-in-out;
        -moz-transition: all 0.2s ease-in-out;
        -o-transition: all 0.2s ease-in-out;
        border-radius:100%;
    }
</style>
</head>
<body><br><br><br><br>
    <img class="touxiang" src="touxiang.jpg" alt=""/>
</body>
</html>