点击这里体验效果：http://keleyi.com/a/bjad/tfxpf3p5.htm

请使用支持CSS3的浏览器查看。请把光标放到图片上,然后再移到图片外，注意效果。 原图 大图

以下是源代码：

 <!DOCTYPE html>

 <html lang="zh-CN">

 <head>

 <meta charset="utf-8">

 <title>足球宝贝来了，任你旋转(CSS3)-柯乐义</title><base target="_blank" />

 <style>

 body {

 background:#ddd;

 }

 .keleyi {

 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;

 }

 .keleyi:hover {

 -webkit-transform: rotateZ(360deg);

 -moz-transform: rotateZ(360deg);

 -o-transform: rotateZ(360deg);

 -ms-transform: rotateZ(360deg);

 transform: rotateZ(360deg);

 }

 </style>

 </head>

 <body>

 <div class="keleyi"><a href="http://keleyi.com">柯乐义</a>

 <br />

 keleyi.com

 </div>

 <div>请使用支持CSS3的浏览器查看本页。请把光标放到图片上,然后再移到图片外，注意效果。

 <br />

 <a href="http://keleyi.com/a/bjad/tfxpf3p5.htm">原文</a>

 <a href="http://keleyi.com/image/a/q5l1xnmf.jpg">原图</a> <a href="http://keleyi.com/image/a/d1eycfl3.jpg" target="_blank">大图</a>

 </div>

 </body>

 </html>

例子中用到了CSS3 transform 属性，请参考：http://keleyi.com/a/bjad/m03g9742.htm

web前端资源：http://www.cnblogs.com/jihua/p/webfront.html

最后放上大图，现在巴西世界杯进行中，选了一张足球宝贝，你觉得怎样：

足球宝贝来了，任你旋转(CSS3)的更多相关文章

  1. css3动画由浅入深总结

    阅读目录 一:过渡动画---Transitions 二:Animations功能 三:translate(tx,ty) 四:scale(x,y) 五:rotate(x): 5.1:skew(x,y): ...

  2. CSS3新特性罗列

    接触CSS3这么久了,总是到要用的时候直接拿来用,却没有好好地总结归纳一下,那就在这里好好梳理一下吧. CSS3边框: 圆角边框: 关键:border-radius <!DOCTYPE html ...

  3. Web前端资源汇总

    本文地址:http://www.cnblogs.com/jihua/p/webfront.html 网页特效库 2017新年快乐特效 CSS3+jQuery实现时钟插件 Html5入门实例" ...

  4. 前端面试题整理（css）

    1.介绍所知道的CSS hack技巧(如:_, *, +, \9, !important 之类). CSS hack的原理: 由于不同的浏览器和浏览器各版本对CSS的支持及解析结果不一样,以及CSS优 ...

  5. css3制作旋转动画

    现在的css3真是强大,之前很多动画都是用jq来实现,但是css3制作的动画要比jq实现起来简单很多,今天呢,我自己也写了一个css旋转动画和大家分享.效果如下面的图片 思路:1.制作之前呢,我们先来 ...

  6. 【CSS3动画】transform对文字及图片的旋转、缩放、倾斜和移动

    前言:之前我有写过CSS3的transform这一这特性,对于它的用法,还不是很透彻,今天补充补充,呵呵 你懂的,小司机准备开车了. a)再提一提transform的四个属性 ①旋转--->ro ...

  7. CSS3鼠标滑过图标放大以及旋转

    本人是HTML5-CSS3初学者,这次分享一款纯CSS3实现的图片动画,当鼠标滑过小图标时,图标会放大,同时图标会出现旋转的动画效果.我们在很多个性化个人博客中经常看到鼠标滑过人物头像后头像图片旋转就 ...

  8. css3+jquery制作3d旋转相册

    首先来看一下今天的炫酷效果: 首先分析一下这张图片: 1.每张图片都有倒影 2.这11张图片呈圆形均匀排列 3.可旋转,上下移动(当然这是效果做出来以后,图片是分析不出来的) 那下面就开始吧. 一.准 ...

  9. 纯css3 3D图片立方体旋转动画特效

    纯css3 3D立方体模块,鼠标触碰,模块炸开,大立方体中套小立方体 效果展示 手机扫描二维码体验效果: 效果图如下: 源码下载:http://hovertree.com/h/bjaf/0qmul8g ...

随机推荐

  1. 不care小米，梁军坦言微鲸才是乐视最大对手

    除了每天毫无悬念地上头条和陷入困境的生态帝国之外,乐视还要继续操心着它的对手们."挑事儿"的小米已经不足为惧,后起之秀微鲸成了一个令它"头疼"的所在.因为,不仅 ...

  2. Python标准库的threading.Thread类(转自别人的翻译)

    这个类表示在单独的控制线程中运行的活动.有两种方法可以指定这种活动,给构造函数传递回调对象,或者在子类中重写run() 方法.其他方法(除了构造函数)都不应在子类中被重写.换句话说,在子类中只有__i ...

  3. 搭建LNAMP环境（三）- 源码安装Apache2.4

    上一篇:搭建LNAMP环境(二)- 源码安装Nginx1.10 1.yum安装编译apache需要的包(如果已经安装,可跳过此步骤) yum -y install pcre pcre-devel zl ...

  4. Hibernate的数据查找，添加！

    1.首先看一下测试数据库的物理模型 2.测试所需要的Hibernate的jar包 3.数据库的sql /*=============================================== ...

  5. flat network 原理与配置 - 每天5分钟玩转 OpenStack（86）

    flat network 是不带 tag 的网络,要求宿主机的物理网卡直接与 linux bridge 连接,这意味着: 每个 flat network 都会独占一个物理网卡. 上图中 eth1 桥接 ...

  6. JavaScript变量声明提前

    上周四吃完午饭,leader发了一道JavaScript的题目给我们做,我们Team里面有做前端的,有做后台的,也有做mobile web的,所以大家对题目的理解各自都不一样,然后在QQ讨论组里面进行 ...

  7. Quartz 在 Spring 中如何动态配置时间--转

    原文地址:http://www.iteye.com/topic/399980 在项目中有一个需求,需要灵活配置调度任务时间,并能自由启动或停止调度. 有关调度的实现我就第一就想到了Quartz这个开源 ...

  8. 如何为RD网关创建自建签名的证书

    创建安全的RD网关是一件非常好的事情,这样可以在公网环境下直接远程接入内部的已开启远程访问的主机服务器. 建立这个安全的RD网关需要的材料有RD网关本身,以及一个证书.由于一般情况下这些在RD网关后面 ...

  9. 给 C# 开发者的代码审查清单

    这是为C#开发者准备的通用性代码审查清单,可以当做开发过程中的参考.这是为了确保在编码过程中,大部分通用编码指导原则都能注意到.对于新手和缺乏经验(0到3年工作经验)的开发者,参考这份清单编码会很帮助 ...

  10. QTableView中修改某个单元格或者行或者列内容颜色

    QTableView的单元格内容实现还是继承了TableViewModel类的data(const QModelIndex &index, int role) const函数,那个设置颜色的问 ...