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