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

Question

我已经使用了供应商前缀，但在 chrome 中它仍然没有为我旋转。

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 的样式中。