CSS3图片旋转特效(360/60/-360度)


Posted in HTML / CSS onOctober 10, 2013

由于没法展示效果只是截了个图
CSS3图片旋转特效(360/60/-360度) 
下面是实现代码:

复制代码
代码如下:

<style>
p#socialicons img{ /* 1st set of icons. Rotate them 360deg onmouseover and out */
-moz-transition: all 0.8s ease-in-out;
-webkit-transition: all 0.8s ease-in-out;
-o-transition: all 0.8s ease-in-out;
-ms-transition: all 0.8s ease-in-out;
transition: all 0.8s ease-in-out;
}
p#socialicons img:hover{
-moz-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
-o-transform: rotate(360deg);
-ms-transform: rotate(360deg);
transform: rotate(360deg);
}
p#socialicons2 img{ /* 2nd set of icons. Rotate them 60deg onmouseover and out */
-moz-transition: all 0.2s ease-in-out;
-webkit-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
-ms-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
p#socialicons2 img:hover{
-moz-transform: rotate(70deg);
-webkit-transform: rotate(70deg);
-o-transform: rotate(70deg);
-ms-transform: rotate(70deg);
transform: rotate(70deg);
}
p#socialicons3 img{ /* 3rd set of icons. Rotate them -360deg onmouseover ONLY. Note where the "transition prop is added */
}
p#socialicons3 img:hover{
-moz-transition: all 0.5s ease-in-out;
-webkit-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
-moz-transform: rotate(-360deg);
-webkit-transform: rotate(-360deg);
-o-transform: rotate(-360deg);
-ms-transform: rotate(-360deg);
transform: rotate(-360deg);
}
</style>
<b>360度旋转 onmouseover和onmouseout</b></p>
<p id="socialicons">
<a href="#">
<img border="0" src="http://www.zzsck.org/wp-content/uploads/2013/10/rss.png" _fcksavedurl=""http://www.zzsck.org/wp-content/uploads/2013/10/rss.png"" /></a>
<a href="#">
<img border="0" src="http://www.zzsck.org/wp-content/uploads/2013/10/delicious.png" /></a>
<a href="#">
<img border="0" src="http://www.zzsck.org/wp-content/uploads/2013/10/facebook.png" /></a>
<a href="#">
<img border="0" src="http://www.zzsck.org/wp-content/uploads/2013/10/twitter.png" /></a>
<a href="#">
<img border="0" src="http://www.zzsck.org/wp-content/uploads/2013/10/yahoo.png" /></a>
</p>
<p><b>60度旋转 onMouseover and onMouseout</b></p>
<p id="socialicons2">
<a href="#">
<img border="0" src="http://www.zzsck.org/wp-content/uploads/2013/10/rss.png" /></a>
<a href="#">
<img border="0" src="http://www.zzsck.org/wp-content/uploads/2013/10/delicious.png" /></a>
<a href="#">
<img border="0" src="http://www.zzsck.org/wp-content/uploads/2013/10/facebook.png" /></a>
<a href="#">
<img border="0" src="http://www.zzsck.org/wp-content/uploads/2013/10/twitter.png" /></a>
<a href="#">
<img border="0" src="http://www.zzsck.org/wp-content/uploads/2013/10/yahoo.png" /></a>
</p>
<p><b>-360度旋转 onMouseover</b></p>
<p id="socialicons3">
<a href="#">
<img border="0" src="http://www.zzsck.org/wp-content/uploads/2013/10/rss.png" /></a>
<a href="#">
<img border="0" src="http://www.zzsck.org/wp-content/uploads/2013/10/delicious.png" /></a>
<a href="#">
<img border="0" src="http://www.zzsck.org/wp-content/uploads/2013/10/facebook.png" /></a>
<a href="#">
<img border="0" src="http://www.zzsck.org/wp-content/uploads/2013/10/twitter.png" /></a>
<a href="#">
<img border="0" src="http://www.zzsck.org/wp-content/uploads/2013/10/yahoo.png" /></a>
</p>

HTML / CSS 相关文章推荐
CSS3基础(RGBa、text-shadow、box-shadow、border-radius)
Nov 13 HTML / CSS
css3实例教程 一款纯css3实现的发光屏幕旋转特效
Dec 07 HTML / CSS
CSS3实现可翻转的hover效果
May 23 HTML / CSS
用css3实现转换过渡和动画效果
Mar 13 HTML / CSS
Css3实现无缝滚动防抖
Sep 14 HTML / CSS
html5弹跳球示例代码
Jul 23 HTML / CSS
详解HTML5中div和section以及article的区别
Jul 14 HTML / CSS
HTML5+Canvas+CSS3实现齐天大圣孙悟空腾云驾雾效果
Apr 26 HTML / CSS
HTML5不支持frameset的两种解决方法
Nov 14 HTML / CSS
canvas实现漂亮的下雨效果的示例
Apr 18 HTML / CSS
html5表单的required属性使用
Jul 07 HTML / CSS
css3 选择器
May 11 HTML / CSS
使用CSS3在触屏上为按钮实现激活效果
Sep 27 #HTML / CSS
纯CSS3实现带动画效果导航菜单无需js
Sep 27 #HTML / CSS
css3中background新增的4个新的相关属性用法介绍
Sep 26 #HTML / CSS
CSS3用@font-face实现自定义英文字体
Sep 23 #HTML / CSS
CSS3媒体查询(Media Queries)介绍
Sep 12 #HTML / CSS
利用CSS3的特性改变文本选中时的颜色
Sep 11 #HTML / CSS
css3进行截取替代js的substring
Sep 02 #HTML / CSS
You might like
2020显卡排行榜天梯图 显卡天梯图2020年3月最新版
2020/04/02 数码科技
PHP DataGrid 实现代码
2009/08/12 PHP
php中数字、字符与对象判断函数用法实例
2014/11/26 PHP
十幅图告诉你什么是PHP引用
2015/02/22 PHP
php错误日志简单配置方法
2016/07/11 PHP
Smarty日期时间操作方法示例
2016/11/15 PHP
让 JavaScript 轻松支持函数重载 (Part 2 - 实现)
2009/08/04 Javascript
解决JS浮点数运算出现Bug的方法
2013/03/12 Javascript
jQuery获得document和window对象宽度和高度的方法
2015/03/25 Javascript
jquery实现未经美化的简洁TAB菜单效果
2015/08/28 Javascript
谷歌Chrome浏览器扩展程序开发小记
2016/01/06 Javascript
AngularJS入门教程之表格实例详解
2016/07/27 Javascript
javascript实现圣旨卷轴展开效果(代码分享)
2017/03/23 Javascript
vue底部加载更多的实例代码
2018/06/29 Javascript
详解如何解决Vue和vue-template-compiler版本之间的问题
2018/09/17 Javascript
如何使用vuex实现兄弟组件通信
2018/11/02 Javascript
layui监听下拉选框选中值变化的方法(包含监听普通下拉选框)
2019/09/24 Javascript
JavaScript实现商品评价五星好评
2020/11/30 Javascript
[01:43]深扒TI7聊天轮盘语音出处4
2017/05/11 DOTA
[07:20]2018DOTA2国际邀请赛寻真——逐梦Mineski
2018/08/10 DOTA
Python随手笔记之标准类型内建函数
2015/12/02 Python
Python自定义函数定义,参数,调用代码解析
2017/12/27 Python
Python基于TCP实现会聊天的小机器人功能示例
2018/04/09 Python
Python实现的字典排序操作示例【按键名key与键值value排序】
2018/12/21 Python
利用python实现AR教程
2019/11/20 Python
Python使用qrcode二维码库生成二维码方法详解
2020/02/17 Python
python如何提取英语pdf内容并翻译
2020/03/03 Python
matplotlib部件之套索Lasso的使用
2021/02/24 Python
DeinDesign德国:设计自己的手机壳
2019/12/14 全球购物
生产部管理制度
2014/01/31 职场文书
畜牧兽医本科生的自我评价
2014/03/03 职场文书
2014年党员干部四风问题自我剖析材料
2014/09/29 职场文书
公司合并协议书范本
2014/09/30 职场文书
师德师风个人整改措施
2014/10/27 职场文书
2015年社区党务工作总结
2015/04/21 职场文书
Golang表示枚举类型的详细讲解
2021/09/04 Golang