直接上代码：

<!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. windbg学习---!thread和.thread

    !thread扩展显示目标系统中线程包括ETHREAD块在内的摘要信息.该命令只能在内核模式调试下使用 !thread [-p] [-t] [Address [Flags]] -p 显示拥有该线程的进 ...

  2. 移植milo的全局光照渲染器代码

    测试flascc的性能优化程度,http://bbs.9ria.com/thread-162705-1-1.html . 可以对比下猫粮的http://bbs.9ria.com/thread-5820 ...

  3. scikit-learn实现ebay数据分析 的随笔

    注:只是随笔 import pandas as pd train = pd.read_csv()  读入scv格式的文件 train = train_set.drop(['EbayID','Quant ...

  4. 设置centos7默认运行级别

    1.查看当前运行级别 systemctl get-default 2.设置命令行运行级别 systemctl set-default multi-user.target 3.设置图形化运行级别 sys ...

  5. log4j相对路径找不到，处理方法

    http://blog.csdn.net/u012345283/article/details/40821833?utm_source=tuicool&utm_medium=referral

  6. spring 异常记录

    1.异常: java.lang.IllegalArgumentException: No converter found for return value of type: class java.ut ...

  7. AJAX - onreadystatechange

    [AJAX - onreadystatechange] 参考:http://www.w3school.com.cn/ajax/ajax_xmlhttprequest_onreadystatechang ...

  8. android 各种xml资源的引用方式

    更多资源类型 本页定义了其它一些具体的资源类型,包括: Bool 存放布尔值的XML资源. Color 存放颜色值的XML资源(十六进制颜色). Dimension 存放数量值的XML资源(带计量单位 ...

  9. modelsim无法识别include文件的解决方法

    modelsim发现include关联的文件编译报语法错误,文件名需要写绝对路径,即使这个文件和工程其它文件在一个目录上.例如只写成 `include "c0_ddr3_model_para ...

  10. hdu 1398 Square Coins (母函数)

    Square Coins Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others)Tota ...