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

　　效果：

　　　　鼠标放置在图片上：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. P1110 [ZJOI2007]报表统计 （multiset）

    [题目链接] https://www.luogu.org/problemnew/show/P1110 有以下三种操作: INSERT i k:在原数列的第i个元素后面添加一个新元素k:如果原数列的第i ...

  2. p标签text-align:justify以及CSS文字两端对齐

    p标签样式添加text-align:justify; 那么就会左右对齐. 使用前: 使用后: CSS文字两端对齐 使用前: 代码: <style> div{ width:100px; he ...

  3. Go语言基础之1--标识符、关键字、变量和常量、数据类型、Go的基本程序结构、Golang的特性

    一.前言 当我们项目较为简单时,我们在src目录下新建一个该项目目录,里面存放源码文件即可,见下图: 当我们一个项目较为复杂时,我们可以在src目录下新建一个该项目目录,在针对该项目不同模块创建不同目 ...

  4. Windows 常见DOS命令

    1. 查看网络连接及路由状况 netstat -a                 查看开启了哪些端口,常用netstat -an netstat -n                  查看端口的网 ...

  5. Spring实现AOP

    转载: https://blog.csdn.net/tolcf/article/details/49133119 [框架][Spring]XML配置实现AOP拦截-切点:JdkRegexpMethod ...

  6. canvas基础入门（二）绘制线条、三角形、七巧板

    复杂的内容都是有简单的线条结合而成的,想要绘制出复杂好看的内容先从画直线开始 canvas绘制直线先认识几个函数 beginPath():开始一条路径,或重置当前的路径 moveTo(x,y):用于规 ...

  7. appium连接夜神模拟器方法总结

    使用appium连接模拟器前提条件:appium环境已经搭建完毕,搭建步骤请参考我的博客:appium手机自动化环境搭建 1.下载并安装夜神模拟器:https://www.yeshen.com/ 2. ...

  8. vue写的ToDoList

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  9. Silverlight 鼠标双击 事件

    Silverlight 双击事件例子 <UserControl x:Class="MouseDbClick.MainPage" xmlns="http://sche ...

  10. TCP连接的ISN、连接建立超时及TCP的长短连接

    问题现象: 一.TCP连接的ISN         之前我们说过初始建立TCP连接的时候的系列号(ISN)是随机选择的,那么这个系列号为什么不采用一个固定的值呢?主要有两方面的原因 防止同一个连接的不 ...