<!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. svn服务器搭建与配置

    http://www.cnblogs.com/armyfai/p/3985660.html

  2. 搭建高性能计算环境（九）、应用软件的安装之gaussian 09

    高斯软件一般使用的都是编译好的二进制版,所以解压缩后设置一下环境变量就可以用了. cd /opt tar xvf g09.tar.gz 设置环境变量,添加到/etc/profile文件中,重新登录后生 ...

  3. Dockpanel的控件加载问题

    1. 正确加载模式:panel.ControlContainer.Controls.Add(control); 如果用panel.Controls.Add(control);则可能出现模块发生位移问题 ...

  4. Hbase之shell操作

    一. 介绍 HBase是一个分布式的.面向列的 开源数据库,源于google的一篇论文<bigtable:一个结构化数据的分布式存储系统>.HBase是Google Bigtable的开源 ...

  5. php时间转换unix时间戳

    本文介绍了php编程中unix时间戳转换的小例子,有关php时间转换.php时间戳的实例代码,有需要的朋友参考下. 第一部分,php 时间转换unix 时间戳实现代码. 复制代码代码示例: <? ...

  6. 10）Java Error and Exception

      1>异常继承类        Error类和Exception类都继续自Throwable类      Error表示系统级的错误情况,如内存错误这样程序无法通过自身的处理再继续执行下去的情 ...

  7. 2）Java中的==和equals

    Java中的==和equals   1.如果比较对象是值变量:只用==   2.如果比较对象是引用型变量:      ==:比较两个引用是不是指向同一个对象实例.      equals:       ...

  8. U6会计科目导入致对账不平

    一个客户,用的是U6版本,想将己使用的账套的科目导入新建的账套中,本想用用友本身自带的总账工具导入,发现导不了.没办法,只能打开数据库,手工导入. 月末结账时,发现对账不平.问题是余额表与明细不平,大 ...

  9. VMT & DMT

    虚拟方法表和动态方法表 虚拟方法表VMT: 一个虚拟方法表从指针所指地址的负偏移.76 处开始,长度动态分配(由虚拟方法的个数确定).虚拟方法表被分为很多小段,每段占4 个字节,也就是众多指针.每个指 ...

  10. MarkDown写作技巧

    前言 年轻的我们往往苦恼于没有充实的社会经历.社会阅历,很难有较强的个人能力.个人魅力!就个人能力而言,本 人主要把它分为两种:“吸收能力”和“输出能力”.吸收能力主要体现了个人对外界知识的摄入能力, ...