zoukankan      html  css  js  c++  java
  • CSS3实现图片旋转

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8" />
    <title>图片旋转</title>
    <style>
    *{margin: 1; padding: 0;}

    .Rotation{
    transition:width 1s, height 1s;
    -moz-transition:width 1s, height 1s, -moz-transform 1s; /* Firefox 4 */
    -webkit-transition:width 1s, height 1s, -webkit-transform 1s; /* Safari and Chrome */
    -o-transition:width 1s, height 1s, -o-transform 1s; /* Opera */
    }
    .Rotation:hover{
    transform:rotate(360deg);
    -moz-transform:rotate(360deg); /* Firefox 4 */
    -webkit-transform:rotate(360deg); /* Safari and Chrome */
    -o-transform:rotate(360deg); /* Opera */
    }

    /*-webkit-animation-iteration-count: infinite;*/
    .Rotation1{
    transition:width 1s, height 1s;
    -moz-transition:width 1s, height 1s, -moz-transform 1s; /* Firefox 4 */
    -webkit-transition:width 1s, height 1s, -webkit-transform 1s; /* Safari and Chrome */
    -o-transition:width 1s, height 1s, -o-transform 1s; /* Opera */

    -webkit-animation: bounce 2.0s infinite ease-in-out;
       animation: bounce 2.0s infinite ease-in-out;
    -webkit-animation-iteration-count: infinite;
    }

    .Rotation1:hover{
    transform:rotate(360deg) ;
    -moz-transform:rotate(360deg) ; /* Firefox 4 */
    -webkit-transform:rotate(360deg) ; /* Safari and Chrome */
    -o-transform:rotate(360deg ) ; /* Opera */
    }

    /*infinite*/

    .ta_c{text-align: center;}

    </style>
    </head>
    <body>

    <div class="ta_c">
    <img class="Rotation" src="img/01.png" width="500"/>
    </div>

    <div class="ta_c">
    <img class="Rotation1" src="img/01.png" width="500"/>
    </div>

    </body>
    </html>

  • 相关阅读:
    (转载)Linux进程基础
    C语言字符串
    DNS域名解析服务
    Linux-SSH远程管理
    Linux文件系统深入了解
    Linux进程和计划任务管理
    Linux账户与权限管理
    MySQL实现读写分离
    SQL数据库常用函数
    MySQL进阶查询(二)
  • 原文地址:https://www.cnblogs.com/dingzhaoqiang/p/4745394.html
Copyright © 2011-2022 走看看