javascript - transform: rotate样式问题（失效）

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);无效是怎么回事