Question

我正在尝试制作导航栏，以便每个页面都有一个图标，文字在图标旁边旋转90 *。由于某种原因，这是行不通的。有什么想法吗？我知道我需要-ms-和-webkit- adjusts，但是我现在在firefox中测试它并且它无法正常工作。

<span style="font-family: 'Gill Sans', 'Gill Sans MT', Calibri, sans-serif;display:inline;float:left;">JOE'S DINER</span>
    <div id="navbar"><span id="icon"> &#xf015 </span><div style="transform:rotate(90deg);display:inline;">Home</div></div> 
    <div id="navbar"><span id="icon"> &#xf083 </span><br/>Menu</div>
    <div id="navbar"><span id="icon"> &#xf091 </span><br/>Pics</div>
    <div id="navbar"><span id="icon"> &#xf007 </span><br/>Foodie Blog</div> 
    <div id="navbar"><span id="icon"> &#xf0e0 </span><br/>Contact Us</div>

并且是ids的css

#navbar{
display:inline;
float:left;
font-size:10px;
text-align:center;
}   

#icon{
font-family: 'FontAwesome';
padding:0 15px;
letter-spacing:12px;
font-size:30px;
text-align:center;
}

Answer 1

这只是因为您的div元素设置为显示inline，因此不符合CSS变换as defined in the W3C Working Draft的要求。换句话说：

可转换元素是HTML命名空间中的一个元素：



a block-level element;



an atomic inline-level element;



display属性计算为table-row，table-row-group，table-header-group，table-footer-group，table-cell或{{ 1}};



或SVG名称空间中具有table-caption，transform或patternTransform属性的元素。

从分隔符中删除gradientTransform显示声明，转换将按指定的方式工作。

Answer 2

您可以将文本包装在＆lt; p>标签，然后：

transform: rotate(90deg);
-ms-transform: rotate(90deg); /* IE 9 */
-webkit-transform: rotate(90deg); /* Safari and Chrome */

这是一个小提琴：http://jsfiddle.net/MathiasaurusRex/6P6MU/

变换：旋转不在我的导航栏上工作

2 个答案: