效果很好玩，代码很简单：

　　效果：

　　　　鼠标放置在图片上：360度顺时针旋转

　　鼠标离开图片：图片260度逆时针旋转

　　

　　只要将下面代码拷贝过去，并将图片改成你想要的就可以看到效果

　　

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>鼠标悬停图片360度旋转效果</title>

<style>

.xwcms {

    width: 220px;

    height: 220px;

    margin: 0 auto;

    background: no-repeat url(%E6%8B%9B%E5%95%86/img/arrow.gif) left top;

    -webkit-background-size: 220px 220px;

    -moz-background-size: 220px 220px;

    background-size: 220px 220px;

    -webkit-border-radius: 110px;

    border-radius: 110px;

    -webkit-transition: -webkit-transform 2s ease-out;

    -moz-transition: -moz-transform 2s ease-out;

    -o-transition: -o-transform 2s ease-out;

    -ms-transition: -ms-transform 2s ease-out;

}

.xwcms:hover {

    -webkit-transform: rotateZ(360deg);

    -moz-transform: rotateZ(360deg);

    -o-transform: rotateZ(360deg);

    -ms-transform: rotateZ(360deg);

    transform: rotateZ(360deg);

}

</style>

</head>

<div class="xwcms">

</div>

<body>

</body>

</html>

　　推荐一个神一样的网站，上面有各种特效：http://www.xwcms.net/

　　以上

　　END

通过CSS3实现：鼠标悬停图片360度旋转效果的更多相关文章

  1. CSS3鼠标悬停图片上浮显示描述代码

    效果:http://hovertree.com/texiao/css3/20/ 效果图: 代码如下: <!doctype html> <html lang="zh" ...

  2. jQuery css3鼠标悬停图片显示遮罩层动画特效

    jQuery css3鼠标悬停图片显示遮罩层动画特效 效果体验:http://hovertree.com/texiao/jquery/39/ 效果图: 源码下载:http://hovertree.co ...

  3. HTML5+CSS3鼠标悬停图片特效

    点击预览效果            下载该特效: HTML5+CSS3鼠标悬停图片特效.zip 特效说明: 一款HTML5+CSS3鼠标悬停图片事件网页特效,集合了最流行鼠标悬停图片文字.图片动画移动 ...

  4. 15款css3鼠标悬停图片动画过渡特效

    分享15款css3鼠标悬停图片动画过渡特效.这是一款15款不同效果的css3 hover动画过渡效果代码.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div class ...

  5. 原生Js封装的产品图片360度展示

    挺简单的一段程序,但是效果不错: 1.把需要展示的36张图片先预加载到浏览器缓存里 2.给展示图片的div添加方法 3.通过鼠标左右移动的像素转换图片 在线效果预览:http://jsfiddle.n ...

  6. 基于html5鼠标悬停图片动画展示效果

    分享一款基于html5鼠标悬停图片动画展示效果.里面包含两款不同效果的html5图片展示效果.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div class=" ...

  7. CSS鼠标悬停图片加边框效果，页面布局发生错位的解决办法

    CSS鼠标悬停图片加边框效果,页面布局发生错位的解决办法 .recomend-list{ width:1200px; a{ @extend %fl; margin-right: 30px; width ...

  8. [置顶] ios 360度旋转效果demo

    demo功能:用UIimageView实现360度旋转效果. demo说明:iPhone6.1 测试成功.主要代码在:FVImageSequence.m中.在touchesMoved事件中,通过替换U ...

  9. CSS3鼠标悬停图片动画

    鼠标放到图片上后: demo地址:demo div: <div class="wai"> <a href="#"> <div cl ...

随机推荐

  1. Html背景图

    <table style="height: 210px;" ><tbody><tr><td style="background- ...

  2. hdu-2036求任意多边形面积

    改革春风吹满地 Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others)Total Sub ...

  3. php composer php amqplib

    下载composer.phar放到项目根目录 d:/www/apps https://getcomposer.org/download/1.4.1/composer.phar 下载安装Composer ...

  4. linux面试题：删除一个目录下的所有文件，但保留一个指定文件

    面试题:删除一个目录下的所有文件,但保留一个指定文件 解答: 假设这个目录是/xx/,里面有file1,file2,file3..file10 十个文件 [root@oldboy xx]# touch ...

  5. java——斗地主小游戏之洗牌发牌

    遇到的问题: 1.int和Integer的区别? 1)Integer是int的包装类,int则是java的一种基本数据类型 . 2)Integer变量必须实例化后才能使用,而int变量不需要 . 3) ...

  6. protobuf在c++的使用方法以及在linux安装

      https://blog.csdn.net/wangyin668/article/details/80046798 https://www.cnblogs.com/zhouyang209117/p ...

  7. JAVA中的for循环

    在Java程序中,要“逐一处理”――或者说,“遍历”――某一个数组或Collection中的元素的时候,一般会使用一个for循环来实现(当 然,用其它种类的循环也不是不可以,只是不知道是因为for这个 ...

  8. android apk反编译,重新打包,签名

    apktool安装 Windows系统: 1. 首先确保系统安装有Java 2. 下载最新版本的apktool.jar https://ibotpeaches.github.io/Apktool/ 下 ...

  9. PHP文件上传error的错误类型 - $_FILES['file']['error']

    假设文件上传字段的名称img,则: $_FILES['img']['error']有以下几种类型 1.UPLOAD_ERR_OK 其值为 0,没有错误发生,文件上传成功. 2.UPLOAD_ERR_I ...

  10. (转)企业级NFS网络文件共享服务

    企业级NFS网络文件共享服务 原文:http://www.cnblogs.com/chensiqiqi/archive/2017/03/10/6530859.html --本教学笔记是本人学习和工作生 ...