点击这里体验效果：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. Laravel 5.3 auth中间件底层实现详解

    1. 注册认证中间件, 在文件 app/Http/Kernel.php 内完成: protected $routeMiddleware = [ 'auth' => \Illuminate\Aut ...

  2. MindManger 2016 64位 破解版

    下载地址:http://pan.baidu.com/s/1mi7xkIO 如果失效请去 “毒逆天吧” 发个求助帖即可就有人补上

  3. Sql Server系列：键和约束

    1 约束的类型 约束可以分为3大类:实体约束.域约束和参照完整性约束. 1.1 实体约束 实体约束都是关于比较行的,实体约束并不关心整体列中的数据,它只对特定行感兴趣. 1.2 域约束 域约束处理一个 ...

  4. ImageView设置边框的两种方式

    转载:http://www.2cto.com/kf/201308/239945.html package cc.testimageviewbounds; import android.os.Bundl ...

  5. 微服务实战（二）：使用API Gateway--转

    原文地址:http://dockone.io/article/482 [编者的话]本系列的第一篇介绍了微服务架构模式.它讨论了采用微服务的优点和缺点,除了一些复杂的微服务,这种模式还是复杂应用的理想选 ...

  6. iOS chart 图表完美解决方案 基于swift

    如果打算在app中使用图标功能,这个框架基本能够满足90%的需求 下边是作者的框架的下载地址 ,基于swift2.0 https://github.com/danielgindi/ios-charts ...

  7. Microsoft Message Analyzer （微软消息分析器，“网络抓包工具 - Network Monitor”的替代品）官方正式版现已发布

    来自官方日志的喜悦 被誉为全新开始的消息分析器时代,由MMA为您开启,博客原文写的很激动,大家可以点击这里浏览:http://blogs.technet.com/b/messageanalyzer/a ...

  8. SSH整合时执行hibernate查询报错:java.lang.ClassCastException: com.ch.hibernate.Department_$$_javassist_0 cannot be cast to javassist.util.proxy

    今天在整合ssh三个框架时,有一个功能,是查询所有员工信息,且员工表和部门表是多对一的映射关系,代码能正常运行到查询得到一个List集合,但在页面展示的时候,就报异常了, java.lang.Clas ...

  9. javascript判断元素存在和判断元素存在于实时的dom中的方法

    今天(周六)下午我在公司加班时不知道要干什么,就打开公司的一个wordpress项目网站,想看下之前自己做的一个网页是否有问题. 打开网站首页,我习惯性的打开了chrome的调试工具,然后鼠标开始滚动 ...

  10. JavaScript把项目本地的图片或者图片的绝对路径转为base64字符串、blob对象在上传

    主题: JavaScript把项目本地的图片或者图片的绝对路径转为base64字符串.blob对象在上传. 用处: 从本地选择图片上传,如项目规定只能选择本项目文件夹下的图像上传为头像等. 主要思想: ...