您的位置：首页 > Web前端 > CSS

CSS3实现头像旋转功能

2018-01-12 09:07 218 查看

CSS3中的transform:rotate()可以实现旋转功能，效果如下图所示：

1、鼠标未移动到图片上的样式：

2、鼠标放到该图片上后，会有动画过渡，旋转图片：

代码如下：

[html] view
plain copy

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

        <style type="text/css">

            img{

                border: #000 solid 2px;

                display: block;

                margin: 50px auto;

                border-radius: 50%;

                transition: all 2.0s;

            }

            img:hover{

                transform: rotate(360deg);

            }

        </style>

    </head>

    <body>

        <img src="img/6.png" />

    </body>

</html>

其中：

transition: all 2.0s;表示所有的属性变换在2秒内完成；

transform: rotate(360deg);表示图片旋转360度。

代码下载地址：http://download.csdn.net/detail/u014175572/9535093

在线Demo预览

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航