直接上代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>无标题文档</title>
    <style>

        body {
            background:#ddd;
        }
        .rotate{
            width: 220px;
            height: 220px;
            margin: 0 auto;
            background: no-repeat url("http://keleyi.com/image/a/q5l1xnmf.jpg") 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;
        }
        .rotate:hover {
            cursor: pointer;
            -webkit-transform: rotateZ(360deg);
            -moz-transform: rotateZ(360deg);
            -o-transform: rotateZ(360deg);
            -ms-transform: rotateZ(360deg);
            transform: rotateZ(360deg);
        }
    </style>
</head>
<body>
<div class="rotate"></div>
</body>
</html>

OK！

css3动画之图片旋转的更多相关文章

  1. CSS3动画@keyframes图片变大变小颜色变化

    在我做公司官网的时候也会帮着写一些游戏的静态页,今天产品要求为了突出一个按钮,他要有颜色的变化而且要变大变小,然后我就在网上搜了下呼吸灯和其他的案例,写了个小damo,看着还有些魔性嘞. html: ...

  2. 基于HTML5+CSS3的图片旋转、无限滚动、文字跳动特效

    本文分享几种基于HTML5+CSS3实现的一些动画特效:图片旋转.无限滚动.文字跳动;实现起来均比较容易,动手来试试! 一.图片旋转 效果图如下: 这个效果实现起来其实并不困难.代码清单如下: < ...

  3. 基于jQuery和CSS3炫酷图片3D旋转幻灯片特效

    在线预览   源码下载 iPresenter是一款效果非常炫酷的jQuery和CSS3 3D旋转幻灯片特效插件.你可以使用它来制作产品展示.图片画廊或者各种幻灯片和轮播图特效.这款幻灯片插件的特点有: ...

  4. css3动画应用-音乐唱片旋转播放特效

    css3动画应用-音乐唱片旋转播放特效 核心点: 1.设置图片为圆形居中,使图片一直不停旋转. 2.文字标题(潘玮柏--反转地球)一直从左到右不停循环移动. 3.点击图标,音乐暂停,图片停止旋转:点击 ...

  5. 用css3实现摩天轮旋转的动画效果

    用css3实现摩天轮旋转的动画效果 1.CSS3 @keyframes 规则如需在 CSS3 中创建动画,您需要学习 @keyframes 规则.@keyframes 规则用于创建动画.在 @keyf ...

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

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

  7. 网页特效：用CSS3制作3D图片立方体旋转特效

    <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...

  8. 使用 CSS3 动画实现的 3D 图片过渡特效

    这是一个基于 CSS3 动画实现的图片过渡效果,共有 Flip.Rotation.Multi-flip.Cube.Unfold 等6种效果,它们将证明 CSS3 Transform 和 Transit ...

  9. Android动画及图片的缩放和旋转

    Android动画有2种,一种是Tween Animation,另一种是Frame Animation,先说说Tween动画吧. Tween动画是对视图对象中的内容进行一系列简单的转换,比如位置的移动 ...

随机推荐

  1. eclipse maven插件问题：error occurred while automatically activating bundle org.eclipse.m2e.core.ui (525)

    ①所有应用Close Project ②重启eclipse  ③所有应用Open Project 出自:http://blog.csdn.net/qr719169236/article/details ...

  2. 转载：Solr的自动完成实现方式（第一部分：facet方式）

    转自:http://www.cnblogs.com/ibook360/archive/2011/11/30/2269059.html 大部分人已经见过自动完成(autocomplete)的功能了(见下 ...

  3. linux在home目录下使用ls命令卡死

    linux在home目录下使用ls命令卡死,原因可能是mount的某个服务器挂掉或出啥问题了,这个时候umount掉就正常了,如果umount提示device is busy,这时可以使用强制卸载   ...

  4. C# DataTable 和List之间相互转换的方法

    介绍:List/IEnumerable转换到DataTable/DataView,以及DataTable转换到List 正文: 一.List<T>/IEnumerable转换到DataTa ...

  5. 检测Java程序运行时间的2种方法（高精度的时间［纳秒］与低精度的时间［毫秒］）

    第一种是以毫秒为单位计算的. 代码如下: long startTime=System.currentTimeMillis(); //获取开始时间 doSomeThing(); //测试的代码段 lon ...

  6. [原创]迈出NIOS的第一步，HelloNIOS

    Altera官方推出NIOS已经很久了,个人感觉C+V代码配合会是后面FPGA使用的一个主流,由C来完成一些对时序要求不高,对功能要求偏高的部分,比如运动控制等:由V来配合时序完成高时序要求的需求以及 ...

  7. RedHat 6.7 Enterprise x64环境下使用RHCS部署Oracle 11g R2双机双实例HA

     环境 软硬件环境 硬件环境: 浪潮英信服务器NF570M3两台,华为OceanStor 18500存储一台,以太网交换机两台,光纤交换机两台. 软件环境: 操作系统:Redhat Enterpris ...

  8. 博弈论揭示了深度学习的未来（译自：Game Theory Reveals the Future of Deep Learning）

    Game Theory Reveals the Future of Deep Learning Carlos E. Perez Deep Learning Patterns, Methodology ...

  9. 在Spring MVC项目中，注解方式使用 .properties 文件及 UTF-8编码问题

    xml配置 <!-- 配置文件 --> <bean id="configProperties" class="org.springframework.b ...

  10. Jquery动态在td中添加checkbox

    如图:想要在这个id为headId的<td>中,用jquery动态添加checkbox 代码如下 : data是我用ajax 从后台获取的数据,里面含有若干个user类,我想把所有的人名字 ...