纯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-不支持，但是果断舍弃，这也符合优雅降级的定义。