變換：旋轉不工作在我的導航欄

我試圖讓我的導航欄，以便每個頁面有一個圖標，文本旋轉90 *旁邊的圖標。由於某種原因，這是行不通的。有什麼想法嗎？我知道我需要-ms-和-webkit-調整，但我現在在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>

和繼承人的CSS的IDS

#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; 
}

來源

2013-11-04 Turlough

這僅僅是因爲你的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，或table-caption;

或SVG名稱空間中具有屬性transform,patternTransform或gradientTransform的元素。

從分配器取下inline顯示聲明和指定的轉換將工作。

來源

2013-11-04 23:17:31

謝謝你的解釋。下次我會記住這一點！ – Turlough

您可以在< p>標籤，然後自動換行：

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

這裏有一個小提琴：http://jsfiddle.net/MathiasaurusRex/6P6MU/

來源

2013-11-04 23:19:01

變換：旋轉不工作在我的導航欄

回答

相關問題