transform: rotate样式失效了，transformrotate,DOM结构 <ul

transform: rotate样式失效了，transformrotate,DOM结构

DOM结构

    <ul>      <li>          <span class="iconfont icon-taoxin"></span>          <p>Specialist</p>      </li>      <li>          <span class="iconfont icon-fangxinggou"></span>          <p>Bonorum</p>      </li>      <li>          <span class="iconfont icon-renwu"></span>          <p>Specialist</p>      </li>      <li>          <span class="iconfont icon-taideng"></span>          <p>Bonorum</p>      </li>  </ul>  

CSS样式
.container-logo ul>li{

transform: rotate(45deg);display: inline-block;width: 150px;height: 150px;text-align: center;line-height: 150px;color: #749e29;cursor: pointer;border: 1px solid #749e29;margin: 29px;}

.container-logo ul>li p{

display: none;font-size: 20px;

}

.container-logo ul>li span.iconfont{

font-size: 40px;transform: rotate(-45deg);-webkit-transform: rotate(-45deg)

}

    问题是这样的外面li标签倾向45度以后；我想要把里面的元素放正；  当我设置里面的span标签时 transform: rotate(-45deg);无效是怎么回事  

font-size: 40px;-webkit-transform: rotate(-45deg)；transform: rotate(-45deg);

前缀要写在原生的前边……

一楼正解。..........

因为transform不适用于inline元素.

编橙之家文章，