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的transition效果和transfor效果示例介绍
Oct 30 HTML / CSS
非常漂亮的CSS3百叶窗焦点图动画
Feb 24 HTML / CSS
非常震撼的纯CSS3人物行走动画
Feb 24 HTML / CSS
图解CSS3制作圆环形进度条的实例教程
May 26 HTML / CSS
老生常谈CSS中的长度单位
Jun 27 HTML / CSS
css3边框_动力节点Java学院整理
Jul 11 HTML / CSS
canvas绘制文本内容自动换行的实现代码
Jan 14 HTML / CSS
HTML5 Canvas 起步(1) - 基本概念
May 12 HTML / CSS
详解前端HTML5几种存储方式的总结
Dec 27 HTML / CSS
使用phonegap进行提示操作的具体方法
Mar 30 HTML / CSS
清除canvas画布内容(点擦除+线擦除)
Aug 12 HTML / CSS
前端使用canvas生成盲水印的加密解密的实现
Dec 16 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
yii实现创建验证码实例解析
2014/07/31 PHP
PHP使用Face++接口开发微信公众平台人脸识别系统的方法
2015/04/17 PHP
php从文件夹随机读取文件的方法
2015/06/01 PHP
laravel 使用auth编写登录的方法
2019/09/30 PHP
js的2种继承方式详解
2014/03/04 Javascript
jQuery使用之设置元素样式用法实例
2015/01/19 Javascript
jQuery.prop() 使用详解
2015/07/19 Javascript
jQuery实现的超酷苹果风格图标滑出菜单效果代码
2015/09/16 Javascript
js简易版购物车功能
2017/06/17 Javascript
vue-router 手势滑动触发返回功能
2018/09/30 Javascript
javascript实现弹出层效果
2019/12/10 Javascript
JavaScript对象原型链原理详解
2020/02/05 Javascript
Python 调用VC++的动态链接库(DLL)
2008/09/06 Python
wxpython 学习笔记 第一天
2009/02/09 Python
Python面向对象编程中的类和对象学习教程
2015/03/30 Python
Python基于dom操作xml数据的方法示例
2018/05/12 Python
用Python解决x的n次方问题
2019/02/08 Python
Python3中列表list合并的四种方法
2019/04/19 Python
Python学习笔记之列表推导式实例分析
2019/08/13 Python
Pytorch 使用opnecv读入图像由HWC转为BCHW格式方式
2020/06/02 Python
keras训练曲线,混淆矩阵,CNN层输出可视化实例
2020/06/15 Python
HTML5高仿微信聊天、微信聊天表情|对话框|编辑器功能
2018/04/23 HTML / CSS
美国专业级皮肤病和spa品质护肤品的高级零售网站:SkinCareRx
2017/02/06 全球购物
服装销售人员求职自我评价
2013/09/26 职场文书
岗位职责的定义
2013/11/10 职场文书
青年志愿者事迹材料
2014/02/07 职场文书
爱耳日活动总结
2014/04/30 职场文书
创优争先心得体会
2014/09/11 职场文书
学习十八大演讲稿
2014/09/15 职场文书
2014年医院党建工作总结
2014/12/20 职场文书
2015年女工委工作总结
2015/07/27 职场文书
2015年法律事务部工作总结
2015/07/27 职场文书
民间借贷纠纷起诉书
2015/08/03 职场文书
《草船借箭》教学反思
2016/02/23 职场文书
python xlwt模块的使用解析
2021/04/13 Python
python 如何用terminal输入参数
2021/05/25 Python