纯css3实现箭头、关闭按钮旋转效果

说起css3的旋转效果，那就要说为什么不用js去实现，CSS3的动画效果，能够减少对JavaScript和Flash文件的HTTP请求这是原因之一。但是css3可能要求浏览器执行很多的工作来完成这个动画效果的渲染，这有可能导致浏览器响应缓慢,因此，在使用一些复杂的特效时，大家需要考虑清楚。不过这样的现象毕竟为数不多。其实很多CSS3技术能够在任何情况下都大幅提高页面的性能。就这一条足以让我们使用CSS3。

下面就来看下实现的代码吧！

html代码：

    <span class="closeBox" style="margin:0px 120px;">
        <img src="data: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-不支持，但是果断舍弃，这也符合优雅降级的定义。