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

　　效果：

　　　　鼠标放置在图片上：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. fsockopen函数被禁用的解决方法

    判断fsockopen 是否可用:function_exists('fsockopen');如果没有开启 一.开启fsockopen函数 修改php.ini,将 disable_functions = ...

  2. Django-redis 缓存

    存在内存中 Diango-redis redis是一个key-value存储系统.和Memcached类似,它支持存储的value类型相对更多,包括string(字符串).list(链表).set(集 ...

  3. 江西财经大学第一届程序设计竞赛 D

    链接:https://www.nowcoder.com/acm/contest/115/D来源:牛客网 题目描述 事情,是这样的. 有这么一天双休日的中午. 我刚把我衣服扔进了洗衣机,然后拿了个小板凳 ...

  4. ssh连接异常

    在平时工作中,有时候需要SSH登陆到别的Linux主机上去,但有时候SSH登陆会被禁止,并弹出如下类似提示: @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@ ...

  5. linux磁盘与文件管理

    一.硬盘的组成与分区 1.物理组成 *圆形的盘片(主要记录数据的部分) *机械手臂与机械手臂上的磁头(可读写盘片上的数据) *主轴马达,可以转动盘片,让机械手臂的磁头在盘片上写数据. *扇区为最小的物 ...

  6. win10下Anaconda3在虚拟环境python_version=3.5.3 中配置pyspark

    1. 序经过了一天的修炼,深深被恶心了,在虚拟环境中配置pyspark花式报错,由于本人实在是不想卸载3.6版的python,所以硬刚了一天,终于摸清了配置方法,并且配置成功,不抱怨了,开讲: 2. ...

  7. 初始 D2 Admin

    1.安装D2 admin 输入:npm install -g @d2-admin/d2-admin-cli 2.创建D2 项目 ,可以选择简洁版或者完整版 输入:d2 create 3.然后 进入创建 ...

  8. datetimepicker使用

    常考地址:http://www.bootcss.c 直接上代码: 步骤:1.http://www.bootcss.com/p/bootstrap-datetimepicker/下载包 2.将里面的js ...

  9. thinkPHP5.0验证器自定义验证规则

    自定义验证规则 protected $rule = [ 'views' => 'require|number|checkviews:0',//checkviews为自定义验证规则,0是传过去的规 ...

  10. php数组·的方法-数组与数据结构

    /*数组与数据结构*/ //shuffle() 随机打乱数组 //array_push() 数组末尾添加元素 //array_pop() 数组末尾删除元素 //array_shift() 数组首位删除 ...