<!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. HTML自动换行的问题

    有时文本文字已经超过所在的区域,但是文字还是不自动换行 可以用强制换行 强制不换行div{ white-space:nowrap;}自动换行div{ word-wrap:break-word; wor ...

  2. C# 获取web.config配置文件内容

    1.web.config提供对客户端应用程序配置文件的访问. 其有两个属性1.ConnectionStrings 获取当前应用程序默认配置的 ConnectionStringsSection 数据. ...

  3. Silverlight Color的颜色值

    1.MainPage.xaml <UserControl xmlns:SysManage="clr-namespace:Application" x:Class=" ...

  4. php怎么删除文件

    php怎么删除文件 删除文件很简单只要使用unlink(文件名)就可以了.

  5. 【FitNess】测试框架试用

    参考网友的博客http://blog.csdn.net/funi16/article/details/8985280 1.官网下载jar包fitnesse-standalone.jar后安装. 2.进 ...

  6. PHP 简单实现MySQL数据搜索、添加数据功能 以设备管理为例

    测试截图: 数据库bzec ,表shebeidangan 列sb_name,sb_numandtype,sb_home,sb_usedate,sb_address,sb_updatetime,sb_r ...

  7. python encode decode unicode区别及用法

    decode 解码 encode 转码 unicode是一种编码,具体可以百度搜 # coding: UTF-8 u = u'汉' print repr(u) # u'\u6c49' s = u.en ...

  8. SpringMVC综合使用手机管理系统Controller层开发

    1. beans.xml的配置 <?xml version="1.0" encoding="UTF-8"?> <beans xmlns=&qu ...

  9. hdu 5104 Primes Problem

    题目连接 http://acm.hdu.edu.cn/showproblem.php?pid=5104 Primes Problem Description Given a number n, ple ...

  10. Android 解决图片大量下载：软引用必须懂4点

    1.对象的强.软.弱和虚引用为了能更加灵活控制对象的生命周期,需要知道对象引用的4中级别,由高到低依次为 :强引用.软引用.弱引用和虚引用 备注: 这四种的区别: ⑴强引用(StrongReferen ...