给图片或文字加上鼠标悬浮时旋转动画
一个很简单的css即可实现图片或文字鼠标悬浮时旋转动画。这里就简单的说一下2d旋转。 首先用到 transform 属性，具体代码如下：
transform:rotate(360deg);
-ms-transform:rotate(360deg); /* IE 9 */
-moz-transform:rotate(360deg); /* Firefox */
-webkit-transform:rotate(360deg); /* Safari 和 Chrome */
-o-transform:rotate(360deg); /* Opera */其中 -ms-transform 支持IE9浏览器，-moz-transform 支持火狐浏览器，-webkit-transform 支持苹果浏览器和谷歌浏览器，-o-transform 支持欧朋浏览器。
一般想要适用所有浏览器，就全部都加上。后面的注释可以自己删掉。360deg 表示旋转360度，自己修改就行了。
然后，鼠标悬浮就需要用到 hover ，结合上述 transform 属性，具体css代码即为：
example-img:hover {
transform:rotate(360deg);
-ms-transform:rotate(360deg);
-moz-transform:rotate(360deg);
-webkit-transform:rotate(360deg);
-o-transform:rotate(360deg);
}这时已经实现了鼠标悬浮到图片上时，图片旋转360度。但是，是看不到旋转动画的，因为是秒选转。所以这时需要用到 transition 属性，结合上述代码。
html示例代码
<img class="example-img" src="图片地址" /> css示例代码
.example-img:hover {
transform:rotate(360deg);
-ms-transform:rotate(360deg);
-moz-transform:rotate(360deg);
-webkit-transform:rotate(360deg);
-o-transform:rotate(360deg);
transition:.5s;
-webkit-transition:.5s;
-moz-transition:.5s;
-o-transition:.5s
}其中 .5s 为过渡时间，自己修改下。
本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2017-10-25，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读