CSS之rotate与display的关系

css的transform提供了rotate函数。rotate对inline元素直接旋转不起作用。比如下面的例子

Yes or No 希望将or旋转。

HTML代码：

Yes <span class="rotateme"> or </span> No

CSS代码：

.rotateme{
transform: rotate(270deg);
display: inline-block;
background: #F00;
color: #FFF;
}

上面代码如果不加display:inline-block将不能正常旋转。

但是下面的代码确是可以工作的。首先将span放入div中，然后div设置为inline

Yes<div class="rotatemyspan"><span>OR</span></div>No

CSS代码

.rotatemyspan{
display:inline;
}
.rotatemyspan span{
transform: rotate(270deg);
background: #F00;
color: #FFF;
}

官方解释：

an element whose layout is governed by the CSS box model which is either a block-level or atomic inline-level element, or whose ‘display’ property computes to ‘table-row’, ‘table-row-group’, ‘table-header-group’, ‘table-footer-group’, ‘table-cell’, or ‘table-caption’ [CSS21]

参考文档：

• https://stackoverflow.com/questions/25779855/rotate-inline-elements-with-css
• https://stackoverflow.com/questions/14883250/css-transform-doesnt-work-on-inline-elements
• https://drafts.csswg.org/css-transforms-1/#terminology