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

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

HTML代码：

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);
}

HTML代码：

      

          

              信息公開
              

                  

                      
資訊
                      
白皮書
                      
關於我們
                      
幫助中心
                  
              
           
      

CSS代码：

.menu>ul>li.has-sub a img{
    margin-left: 10px;
    transition: transform 0.5s;
}
.menu>ul>li.has-sub a:hover>img{
    transform: rotate(180deg);
}