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

　　效果：

　　　　鼠标放置在图片上：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. java程序员的从0到1：@Resource与@Autowired的比较

    目录: 1.@Resource与@Autowired的源码分析 2.@Resource与@Autowired的相同点 3.@Resource与@Autowired的不同点 正文: 1.@Resourc ...

  2. java算法外传之靠工资多久能实现小目标...

    public static void main(String[] args) { //小目标 final int smallGoal=100_000_000; //月份 int month=1; // ...

  3. Android viewpager + fragment取消预加载

    1,在fragment中重写setUserVisibleHint方法private boolean isVisibleToUser;@Overridepublic void setUserVisibl ...

  4. centos 7 安装 最小化 碰到的问题

    1)分区推荐 2)更新yum源  (收藏 https://mirror.webtatic.com/yum/el7/) cd /etc/yum.repos.d/ 更新源 wget http://mirr ...

  5. Java对象排序两种方法

    转载:https://blog.csdn.net/wangtaocsdn/article/details/71500500 有时候需要对对象列表或数组进行排序,下面提供两种简单方式: 方法一:将要排序 ...

  6. github访问慢解决

    参考:https://github.com/chenxuhua/issues-blog/issues/3 hosts文件: # GitHub Start 192.30.253.112 github.c ...

  7. c++中enum 如何使用(转)

    ENUM概况 enum枚举类型是C/C++中的一种数据类型,与struct和class一样是用户自定义的类型,其特点在于enum类型的变量取值是有限的,是可以一一列举出来的. ENUM定义 C++ e ...

  8. Tab 插件（一）

    前言 使用Jquery封装插件,使代码复用不需要每个功能重新编写代码只需修改传入参数. jQuery 插件常见到有类开发 和对象开发模式, 在下边介绍两种模式使用,初次编写,有误拍砖. jQuery ...

  9. visual stdio使用

    现在转换使用visual stdio,因为很多和以前的快捷键不同,也不打算换了,这样可移动性应该更好吧. 1.注释代码, 首先按下ctrl + k,然后再按下ctrl + c 2.取消注释,首先按下c ...

  10. python 字符串转字节数组

    场景: java加解密和python加解密互转的时候,因一些非显示字符无法确认两者是否一致,故需要打出他们的十六进制字节数组进行比较 1.python代码实现 str='123';print str. ...