直接上代码：

<!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. 源码编译Nodejs 4.6 on CentOS6

    1.本来是要按照个newman程序,无奈newman必须要node版本>=4,所以不得不安装node4.6 下载地址:https://nodejs.org/dist/v4.6.0/node-v4 ...

  2. quartz 框架定时任务，使用spring @Scheduled注解执行定时任务

    配置quartz 在spring中需要三个jar包: quartz-1.6.5.jar.commons-collections-3.2.jar.commons-logging-1.1.jar 首先要配 ...

  3. uitableview性能优化（转）

    这个感觉写的很好 收藏一下 以备后用 转自 http://www.cnblogs.com/pengyingh/articles/2354714.html 在iOS应用中,UITableView应该是使 ...

  4. Android笔记之——事件的发生

    Java:package com.example.helloworld;import android.content.Intent;import android.support.v7.app.AppC ...

  5. LeetCode 214 Shortest Palindrome

    214-Shortest Palindrome Given a string S, you are allowed to convert it to a palindrome by adding ch ...

  6. UNICODE 7.0定义的表情符

    td.graph { font-size:24px; } UNICODE 7.0定义了78个表情符,从0x1F600到0x1F64F(其中0x1F643和0x1F644没有定义).下表中列出了这些表情 ...

  7. linux终端terminal个性化配置(转)

    http://blog.csdn.net/pipisorry/article/details/39584489 {本文介绍Linux终端字体颜色设置.终端提示符显示内容设置.自定义alias命令} l ...

  8. 谈谈Activiti中流程对象之间的关系

    详细见:http://www.kafeitu.me/activiti/2012/03/22/workflow-activiti-action.html (咖啡兔好牛!) 详细见: http://blo ...

  9. code project 上的内存管理的示例代码

    /******************************************************************** created: 2014/03/17 18:53 file ...

  10. 解决 VMWARE MAC 10.12无法全屏的问题

    昨天我在VMware上装了10.10,然后通过APP store 升级了系统到 10.12,升级前安装VMware tools 能自动全屏,可是升级后不行. 然后在网上查了很多资料,发现并没有这方面的 ...