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

我使用了供应商前缀，但在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 );

}

最佳答案

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

关于html - 为什么CSS3 Transform旋转在此代码中不起作用？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/20315166/