Question

我的h1标题为span。 h1 span元素将旋转45度。但事实并非如此。

HTML

<h1> i have to go <span class="rotate">From</span> here </h1>

CSS

.rotate{
    transform: rotate(45deg);
}

它不起作用。

Answer 1

提供display: block或display: inline-block：

.rotate {
  transform: rotate(45deg);
  display: block;
}

Answer 2

你应该添加一个＆＃34; display：inline-block＆＃34;属性，不要忘记添加ms和webkit兼容性：）

.rotate{
    -ms-transform: rotate(45deg); /* IE 9 */
    -webkit-transform: rotate(45deg); /* Chrome, Safari, Opera */
    transform: rotate(45deg);
    display: inline-block;
}

这是jsFiddle

Answer 3

您正在处理其他问题

.working{
    transform:rotate(45deg);  
    margin-top:300px;
}

<h1 class="working">hello see it's working</h1>

使用转换查询时，h1 span不会旋转

3 个答案: