純css3實現箭頭、關閉按鈕旋轉效果

說起css3的旋轉效果，那就要說為什么不用js去實現，CSS3的動畫效果，能夠減少對JavaScript和Flash文件的HTTP請求這是原因之一。但是css3可能要求瀏覽器執行很多的工作來完成這個動畫效果的渲染，這有可能導致瀏覽器響應緩慢,因此，在使用一些復雜的特效時，大家需要考慮清楚。不過這樣的現象畢竟為數不多。其實很多CSS3技術能夠在任何情況下都大幅提高頁面的性能。就這一條足以讓我們使用CSS3。

下面就來看下實現的代碼吧！

html代碼：

    <span class="closeBox" style="margin:0px 120px;">
        <img src="images/cross26.png" class="close">
    </span>

css代碼：

        .closeBox{
            display: inline-block;
            width: 50px;
            height: 50px;
            transition: transform 0.5s;
            -moz-transition: -moz-transform 0.5s; /* Firefox 4 */
            -webkit-transition: -webkit-transform 0.5s; /* Safari 和 Chrome */
            -o-transition: -o-transform 0.5s;
        }
        .closeBox img{
            width: 100%;
        }
        .closeBox:hover{
            transform: rotate(180deg);
            -webkit-transform: rotate(180deg);
            -moz-transform: rotate(180deg);
            -o-transform: rotate(180deg);
        }

是不是 so easy!當然我還要說一下兼容性問題，IE8-不支持，但是果斷舍棄，這也符合優雅降級的定義。