我有以下代碼，它垂直顯示文本。 FIDDLE在div上顯示不同的文本
<div id="btn-toggle-menu">
M
e
n
u
</div>
CSS：
#btn-toggle-menu {
top:0;
left:0;
width:20px;
cursor:pointer;
font-weight:bold;
background-color:#ccc;
text-align:center;
white-space: pre;
}
O/P： 
我希望文字顯示像它指向所需的菜單文本的一個。有人可以給我演示小提琴嗎？
檢查這個link
CSS
#btn-toggle-menu {
top:0;
left:0;
width:20px;
height:500px;
cursor:pointer;
font-weight:bold;
background-color:#ccc;
text-align:center;
white-space: pre;
vertical-align:middle;
}
#inner-div
{
-webkit-transform:rotate(-90deg);
-moz-transform:rotate(-90deg);
-o-transform: rotate(-90deg);
white-space:nowrap;
margin-top:150px;
}
添加的跨度與本類（或更改CSS選擇器），這應該這樣做
.textWrapper{
background: #FFF;
display: inline-block; /* inline doenst work, block seems to make it switch CC<->CCW */
-moz-transform:rotate(90deg); /* FireFox*/
-webkit-transform:rotate(90deg); /* Safari and Chrome */
-o-transform:rotate(90deg); /* Opera */
-ms-transform:rotate(90deg); /* IE9 */
-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(SizingMethod='auto expand', M11=0.7071067811865476, M12=-0.7071067811865475, M21=0.7071067811865475, M22=0.7071067811865476)"; /* IE8 */
transform: rotate(90deg);/* The way it should work: */
}
這可能會轉向錯誤的方式，只是將其更改爲-90度或270度。 請記住，IE8不會做奇數（如67），堅持45degree步驟，以避免該 我沒有添加IE7或更舊的代碼，應該被燒燬沒有仁慈。
非常簡單的小提琴：http://jsfiddle.net/DqTe6/1/。這並沒有改善字體。您可能需要使用圖片。 通常我更喜歡像文本，但文本 '菜單' 沒有SEO的價值無論如何
你能給我一個小提琴嗎？ –
在主題中添加小提琴 – Martijn
<div id="btn-toggle-menu">
<p class="text">Menu</p>
</div>
.text
{
-moz-transform: rotate(-90.0deg); /* FF3.5+ */
-o-transform: rotate(-90.0deg); /* Opera 10.5 */
-webkit-transform: rotate(-90.0deg); /* Saf3.1+, Chrome */
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=0.083);
/* IE6,IE7 */
-ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=0.083)";
}
小提琴：
你的意思是這樣的嗎？
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
transform: rotate(-90deg);
-webkit-transform-origin: 50% 50%;
-moz-transform-origin: 50% 50%;
-ms-transform-origin: 50% 50%;
-o-transform-origin: 50% 50%;
transform-origin: 50% 50%;
試試這個，
HTML
<div class="bg">
<div id="btn-toggle-menu">Menu</div>
</div>
CSS
#btn-toggle-menu {
background-color: #FFFFFF;
cursor: pointer;
font-weight: bold;
height: 20px;
left: -10px;
position: absolute;
text-align: center;
top: 40%;
width: 40px;
/* white-space: pre;*/ /* Safari */
-webkit-transform: rotate(-90deg);
/* Firefox */
-moz-transform: rotate(-90deg);
/* IE */
-ms-transform: rotate(-90deg);
/* Opera */
-o-transform: rotate(-90deg);
/* Internet Explorer */
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}
.bg{background-color:#ccc;height:100px;width:20px;position:relative}
如果你不需要，你不應該使用'位置：abosulute'。這種情況只需要一個保證金。絕對會減慢瀏覽器（說毫秒！），如果你使用絕對分配，你會注意到它。此外，它使代碼更難以處理，父母必須是相對的等等 – Martijn
使用貝洛奧裏藏特CSS在你的代碼：
-webkit-transform: rotate(-90deg);
-ff-transform: rotate(-90deg);
transform: rotate(-90deg);
在這裏，你去.. 的稍作修改的版本@馬亭的答案。
CSS
.textWrapper{
background: #FFF;
/* FireFox*/
-moz-transform:rotate(270deg);
/* Safari and Chrome */
-webkit-transform:rotate(270deg);
/* Opera */
-o-transform:rotate(270deg);
/* IE9 */
-ms-transform:rotate(270deg);
/* IE8 */
-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(SizingMethod='auto expand', M11=0.7071067811865476, M12=-0.7071067811865475, M21=0.7071067811865475, M22=0.7071067811865476)";
}
HTML
<div id="btn-toggle-menu" class="btn textWrapper">M e n u </div>
嘗試JS小提琴
.element {
-moz-transform: rotate(270deg);
-webkit-transform: rotate(270deg) ;
-o-transform: rotate(270deg) ;
-ms-transform: rotate(270deg) ;
transform: rotate(270deg);
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);
background-color:yellow;
height:50px;
width:50px;
}
什麼是你的問題??? –
看到我編輯的文章 –
認爲你需要查找css3轉換 – Pete