直接上代码：

<!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. nagios二次开发（五）---nagios和nagiosql的关系

    根据对nagios和nagiosql的了解,笔者简要的将二者的关系粗略的梳理了一下,具体情况如下图所示: 从上面的关系图中可以看出,nagios与nagiosql共享了主机.主机组.服务.服务组等.c ...

  2. iOS 类的判断方法

    -(BOOL) isKindOfClass: classObj 用来判断是否是某个类或其子类的实例 -(BOOL) isMemberOfClass: classObj 用来判断是否是某个类的实例 -( ...

  3. 一步一步了解Cocos2dx 3.0 正式版本开发环境搭建（Win32/Android）

    cocos2d-x 3.0发布有一段时间了,作为一个初学者,我一直觉得cocos2d-x很坑.每个比较大的版本变动,都会有不一样的项目创建方式,每次的跨度都挺大…… 但是凭心而论,3.0RC版本开始 ...

  4. VS2010项目的部署与安装

    VS2010项目的部署与安装 转自:http://www.cnblogs.com/smile-wei/archive/2012/07/06/2579607.html winform程序,我想进行安装. ...

  5. centos编译安装apache

    1.安装工具和依赖包 yum install unzipyum -y install pcre-develyum groupinstall "Development Tools" ...

  6. c# NPOI 导出EXCEL

    需要引入dll文件 也可以在NuGet里面管理(推荐) 比较方便 . using System; using System.Collections.Generic; using System.Linq ...

  7. linux配置java环境变量(详细)

    linux配置java环境变量(详细) 本文完全引用自: http://www.cnblogs.com/samcn/archive/2011/03/16/1986248.html 一. 解压安装jdk ...

  8. cell当中的按钮如何获得cell内容

    cell当中的btn添加方法 [cell.btn addTarget:self action:@selector(btnClickedwith:) forControlEvents:UIControl ...

  9. javac 命令出现 找不到文件 问题及解决办法

    如果环境配置好了,使用java -version回车可以正常查看到版本信息. 使用javac Demo.java 如果提示文件找不到 可能原因1: 源文件与当前命令行不在同目录下,这时候就要切换到同一 ...

  10. Linux cp命令使用说明

    Linux cp命令使用说明 --功能说明:复制目录或文件 --命令格式:cp  [参数]  <文件或目录>  <文件或目录> --常用参数: -R 复制目录 -i 覆盖文件之 ...