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>

  • 相关阅读:
    Ios开发中UILocalNotification实现本地通知实现提醒功能
    Oracle 客户端连接时报ORA-01019错误总结
    linux中合并多个文件内容到一个文件的例子
    java截取字符串函数
    springcloud 笔记
    Aop笔记
    SpringMvc返回Json调试
    jackjson-databind-2.9.3 笔记
    MyBatis 笔记
    Jvm 10 升级笔记
  • 原文地址:https://www.cnblogs.com/dingzhaoqiang/p/4745394.html
Copyright © 2011-2022 走看看