4

CSSボタンを作成しました。ボタンでテキストを垂直に回転させたいのですが、テキストだけです。どうすればこれを達成できますか。私のCSSボタンコード:

.button_example{

border:1px solid #7d99ca; 
-webkit-border-radius: 3px; 
display: table-column-group;
/*-webkit-transform: rotate(-90deg); rotate the whole button*/
-moz-border-radius: 3px;
border-radius: 5px;
font-size:22px;
font-family:Impact, Charcoal, sans-serif; 
padding: 10px 10px 10px 10px; 
text-decoration:none; 
display:inline-block;
text-shadow: -1px -1px 0 rgba(0,0,0,0.3);
font-weight:strong; 
color: #00a19c;
color: #3388fa;


 background: transparent;   /* size and positioning*/
 margin-left: 121px;
 margin-top: 1px;
 width: 24px;
 height: 485px; 
 font-size:14px;
 font-weight:700;
 position:absolute;left:1120px;top:180px;

background-image: linear-gradient(to bottom, #FFFFFF, #FFFFFF);
filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#FFFFFF, endColorstr=#FFFFFF);

}

テキストだけを回転させる方法はありますか？

4

2 に答える 2

11

変換スタイルを適用するために、ボタン内にスパン (または他のインライン要素) を追加せずにこれを達成する他の方法はわかりません。

CSS:

button span {
    display: inline-block;
    transform: rotate(-90deg);
}

HTML:

<button><span>Your Text</span></button>

Internet Explorer はフィルターなしで下位バージョンでのローテーションをサポートしていないため、ベンダー プレフィックス (-moz、-webkit、-ms、...) と Internet Explorer のフォールバックを追加することを忘れないでください。

CSS を使用した回転に関する基本的なサンプルを次に示します: http://css-tricks.com/snippets/css/text-rotation/

于 2013-10-02T07:32:41.920 に答える
-1

テキストを 90 度回転:

-webkit-transform: rotate(90deg);   
-moz-transform: rotate(90deg);
-ms-transform: rotate(90deg);
-o-transform: rotate(90deg);
transform: rotate(90deg);

詳細はこちら：垂直テキスト方向

于 2013-10-02T07:47:31.647 に答える