为什么CSS3 Transform rotate在此代码中不起作用

Question

我使用了供应商前缀，但它在chrome中仍然不适用。

代码笔上的代码

<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>

或者如下面所建议的，添加CCD_。

Answer 3

转换不适用于内联元素，如跨度。正如其他人所提到的，display:inline block；会帮你解决的。