为什么CSS3 Transform旋转不能在这段代码中工作？

Question

我使用过供应商前缀，但它仍然没有为我旋转镀铬。

codepen上的代码

<div class="on">
  <span class="zocial-dribbble"></span>
  <span class="s" id="s">S</span>
</div>

CSS：

@import url(http://weloveiconfonts.com/api/?family=zocial);

/* zocial */
[class*="zocial-"] {
  font-family: 'zocial', sans-serif;
  font-size:200px;
}

#s {
  font-size:200px;
    transform:rotate( -60deg );
    -ms-transform:rotate(-60deg);
    -webkit-transform:rotate( -60deg );

}

Answer 1

将display:inline-block添加到#s的样式。

Answer 2

试试这个：

<div class="on">
  <span class="zocial-dribbble"></span>
  <div class="s" id="s">S</div>
</div>

或按照以下建议添加display:inline-block;即可。

Answer 3

转换不适用于内联元素，例如跨度。正如其他人提到的那样，显示：inline-block;会把你排除在外。