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

　　效果：

　　　　鼠标放置在图片上：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. C语言中存储类别、链接与内存管理

      第12章 存储类别.链接和内存管理 通过内存管理系统指定变量的作用域和生命周期,实现对程序的控制.合理使用内存是程序设计的一个要点. 12.1 存储类别 C提供了多种不同的模型和存储类别,在内存中 ...

  2. ButterKnife 8.4注入失败

    1,第一步:项目的gradle中增加 classpath 'com.neenbedankt.gradle.plugins:android-apt:1.8'buildscript { repositor ...

  3. Go语言基础之6--map（字典）数据类型

    一.map数据类型 1.1 声明和定义 map类型是一个key-value的数据结构,又叫字典.(map也是可以扩容的,内部自动扩容) 声明: var map1 map[keytype]valuety ...

  4. 读书笔记 - 《毛X东传》

    这个书名重复太多,这本的作者是迪克威尔逊.这本书很有意思,可以看出是一个局外人根据残缺不全的资料所写的出来的,而且是结合心理分析的手法主要描述政治历程.总体来说作为传记不够全面,但对于一个中国人来说可 ...

  5. python解决excel工作薄合并处理（openpyxl处理excel2010以上版本）

    前段时间使用xlrd.xlwt对文件进行处理(https://www.cnblogs.com/pinpin/p/10287491.html),但是只能处理excel2010以下版本,所以又写了个处理e ...

  6. php数组·的方法-数组排序

    /* * * 数组排序函数*/ //asort() 数组元素值升序排序 //arsort() 降序 $arr7=array(1,23,65,34,3,2,3,34,453,54,456,65,5); ...

  7. Linux执行.sh文件Permission denied

    执行sh文件报没有权限: 看下该文件的权限: 缺少执行的权限,直接加上吧: test.sh 权限加上去了,可以执行sh文件了 若用 chmod 4755 filename 可使此程序具有root的权限

  8. loadrunner学习--基础知识

    性能测试相关术语: 1.响应时间:指系统从发出请求开始到客户端接受到所有数据所消耗的时间. 2.并发用户:指同一时刻与服务器进行数据交互的所有用户数量.计算公式F=Nvu x R/T 其中F表示吞吐量 ...

  9. sklearn中常用数据预处理方法

    1. 标准化(Standardization or Mean Removal and Variance Scaling) 变换后各维特征有0均值,单位方差.也叫z-score规范化(零均值规范化).计 ...

  10. Unity Transform

    public class PlayerControll : MonoBehaviour { Transform playerTransform; Animation playerAnimation; ...