关于css:纯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);
}

HTML代码：

<div class="menu" id="cssmenu">
      <ul class="clearfix">
          <li class="has-sub">
              <a href="">信息公開<img src="./img/xia.png"></a>
              <ul>
                  <div class="ul">
                      <li><a href="">資訊</a></li>
                      <li><a href="">白皮書</a></li>
                      <li><a href="">關於我們</a></li>
                      <li><a href="">幫助核心</a></li>
                  </div>
              </ul>
           </li>
      <ul>
</div>

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