<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <title></title>

    <style type="text/css">

        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>

</head>

<body>

    <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>

</body>

</html>

　　

CSS3图片旋转特效的更多相关文章

  1. html5+css3图片旋转特效

    <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8" ...

  2. 9种jQuery和css3图片动画特效代码演示

    1.自由旋转的jQuery图片 演示和下载地址 2.css3阴影动画效果 演示和下载地址 3.拉窗帘特效图片 演示和下载地址 4.css3文字特效动画 演示和下载地址 5.css3时钟代码 演示和下载 ...

  3. 40免费的 jQuery & CSS3 图片热点特效

    jQuery CSS3 形象悬停效果可能是一个优秀的网站项目中添加的效果.这个特殊的收集是大约50个 jQuery CSS3 形象徘徊影响最近出版的.这些图像悬停效果可以作为一个有效的和创造性的方式添 ...

  4. css3图片旋转

    <!DOCTYPE html> <html lang="en"> <head> <meta http-equiv="Conten ...

  5. 纯css3图片旋转展示

    <!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>& ...

  6. CSS3 图片旋转

    .nav_all { position:relative; z-index:; width:172px; display:inline; ; } .nav_all b { display:block; ...

  7. CSS3动画旋转——（图片360°旋转）

    今天在重构网页特效的时候,想着用到一个css3的旋转特效.简单来一个demo. html <div class="box"> <img src="./y ...

  8. 强大！HTML5 3D美女图片旋转实现教程

    又到周末,来弄点HTML5的特效玩玩,今天要折腾的是HTML5 3D图片特效,图片在垂直方向上被分割成一条条小矩形,在图片上拖动鼠标即可让每一个小矩形旋转,从而让图片形成3D立体的效果,来看看效果图: ...

  9. 网页特效：用CSS3制作3D图片立方体旋转特效

    <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...

随机推荐

  1. php中使用end方法报错

    <b>Strict Standards</b>:  Only variables should be passed by reference in <b> 1.如果 ...

  2. 软件工程 speedsnail 冲刺3

    2015-5-7 完成任务:环境崩溃,重新配置环境,学习了黑马android教学视频前6集: 遇到问题: 问题1 Error: Error parsing C:\Users\sam\.android\ ...

  3. Oracle中存储过程与函数的区别

    Oracle 获取信息一般用function 修改数据用存储过程(需要执行commit命令)

  4. CentOS配置FTP(VSFTPD)

    一.vsftp安装篇 # 安装vsftpd yum -y install vsftpd # 启动 service vsftpd start # 开启启动 chkconfig vsftpd on 二.v ...

  5. PHP字符串拼接与MySQL语句

    这个部分总是钻牛角尖.总是出错. public function getList($pagesize=25){ $where = '1'; $tableName = $this->getTabl ...

  6. C++排列对称串

    题目内容:字符串有些是对称的,有些是不对称的,请将那些对称的字符串按从小到大的顺序输出.字符串先以长度论大小,如果长度相同,再以ASCII码值为排序标准. 输入描述:输入数据中含有一些字符串(1< ...

  7. Oracle 10g 之自动收集统计信息

    从10g开始,Oracle在建库后就默认创建了一个名为GATHER_STATS_JOB的定时任务,用于自动收集CBO的统计信息.这个自动任务默认情况下在工作日晚上10:00-6:00和周末全天开启. ...

  8. jquery.validate新的写法(jquery.validate1.13.js)

    <script src="../js/jquery.js"></script> <script src="../js/jquery.vali ...

  9. 【Django】Apache上运行单个Django项目，mod_wsgi配置

    1 安装环境 操作系统:Ubuntu 12.04 LTS 32 位(安装在VMware虚拟机中) python 版本: Python 2.7.3 Django版本 >>> djang ...

  10. 微信支付开发h5发起支付再次签名，返回给h5前端

    注意:参数区分大小写.