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