css - cssでテキストを回転させるにはどうすればよいですか？

Question

cssでテキストを回転して、次の出力を取得するにはどうすればよいですか。

こんにちは、

編集：

迅速な提案をありがとう。jsfidleにサンプルコードを追加しました。

http://jsfiddle.net/koolkabin/yawYM/

HTML：

<div class="mainWrapper">
    <div class="rotateObj">
        <div class="title active">First Text Title</div>
        <div class="content">
            Here goes my bla bla bla text and more stuffs...
            Here goes my bla bla bla text and more stuffs...
            Here goes my bla bla bla text and more stuffs...
            Here goes my bla bla bla text and more stuffs...
            Here goes my bla bla bla text and more stuffs...
            Here goes my bla bla bla text and more stuffs...
            Here goes my bla bla bla text and more stuffs...
            Here goes my bla bla bla text and more stuffs...
            Here goes my bla bla bla text and more stuffs...
            Here goes my bla bla bla text and more stuffs...
            Here goes my bla bla bla text and more stuffs...
            Here goes my bla bla bla text and more stuffs...
        </div>
        <div class="title">First Text Title</div>
        <div class="content hide">
            Here goes my bla bla bla text and more stuffs...
            Here goes my bla bla bla text and more stuffs...
            Here goes my bla bla bla text and more stuffs...
            Here goes my bla bla bla text and more stuffs...
            Here goes my bla bla bla text and more stuffs...
            Here goes my bla bla bla text and more stuffs...
            Here goes my bla bla bla text and more stuffs...
            Here goes my bla bla bla text and more stuffs...
            Here goes my bla bla bla text and more stuffs...
            Here goes my bla bla bla text and more stuffs...
            Here goes my bla bla bla text and more stuffs...
            Here goes my bla bla bla text and more stuffs...
        </div>
        <div class="title">First Text Title</div>
        <div class="content hide">
            Here goes my bla bla bla text and more stuffs...
            Here goes my bla bla bla text and more stuffs...
            Here goes my bla bla bla text and more stuffs...
            Here goes my bla bla bla text and more stuffs...
            Here goes my bla bla bla text and more stuffs...
            Here goes my bla bla bla text and more stuffs...
            Here goes my bla bla bla text and more stuffs...
            Here goes my bla bla bla text and more stuffs...
            Here goes my bla bla bla text and more stuffs...
            Here goes my bla bla bla text and more stuffs...
            Here goes my bla bla bla text and more stuffs...
            Here goes my bla bla bla text and more stuffs...
        </div>
        <div class="title">First Text Title</div>
        <div class="content hide">
            Here goes my bla bla bla text and more stuffs...
            Here goes my bla bla bla text and more stuffs...
            Here goes my bla bla bla text and more stuffs...
            Here goes my bla bla bla text and more stuffs...
            Here goes my bla bla bla text and more stuffs...
            Here goes my bla bla bla text and more stuffs...
            Here goes my bla bla bla text and more stuffs...
            Here goes my bla bla bla text and more stuffs...
            Here goes my bla bla bla text and more stuffs...
            Here goes my bla bla bla text and more stuffs...
            Here goes my bla bla bla text and more stuffs...
            Here goes my bla bla bla text and more stuffs...
        </div>
        <div class="title">First Text Title</div>
        <div class="content hide">
            Here goes my bla bla bla text and more stuffs...
            Here goes my bla bla bla text and more stuffs...
            Here goes my bla bla bla text and more stuffs...
            Here goes my bla bla bla text and more stuffs...
            Here goes my bla bla bla text and more stuffs...
            Here goes my bla bla bla text and more stuffs...
            Here goes my bla bla bla text and more stuffs...
            Here goes my bla bla bla text and more stuffs...
            Here goes my bla bla bla text and more stuffs...
            Here goes my bla bla bla text and more stuffs...
            Here goes my bla bla bla text and more stuffs...
            Here goes my bla bla bla text and more stuffs...
        </div>
    </div>
</div>

CSS：

    .mainWrapper{margin:0 auto; width:960px; background:#EFEFEF;}
    .rotateObj{position:relative; height:400px;}
    .rotateObj .title{
        float:left;
        background:gray;
        width:50px;
        height:100%;
        
        /** Rounded Border */ 
        border-radius:5px;-moz-border-radius:5px;
        
        /** Rotation */
        -webkit-transform: rotate(-90deg); 
        -moz-transform: rotate(-90deg);    
        transform:rotate(-90deg);
        filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
    }
    .rotateObj .active{background:green;}
    .rotateObj .content{float:left;width:600px;height:100%;padding:20px;}
    .hide{display:none;}

私が直面している問題は、テキストを回転させると、配置と位置が崩れることです。それで、それを引き起こしているのは何ですか、そしてどうすればそれらを管理できますか？

Answer 1

あなたの場合、前述のように、変換プロパティから回転オプションを使用するのが最善です。プロパティもありwriting-mode、rotate(90deg) のように機能するため、適用後に回転する必要があります。この場合でも正しい解決策ではありませんが、このプロパティに注意する必要があります。

例：

writing-mode:vertical-rl;

変換の詳細: https://kolosek.com/css-transform/

書き込みモードの詳細: https://css-tricks.com/almanac/properties/w/writing-mode/

Answer 2

CSS3 transform プロパティ rotateを使用する必要があります-どのブラウザーがそれをサポートしているか、および使用する必要があるプレフィックスについては、こちらを参照してください。

Webkit ブラウザの 1 つの例は次のとおりです。-webkit-transform: rotate(-90deg);

編集:質問が大幅に変更されたため、Chrome/Safari で動作するデモ-webkit-を追加しました ( CSS プレフィックス付きルールのみを含めたため)。あなたが抱えている問題は、タイトル divを回転させたくないということですが、単にその中のテキストを回転させたいということです。回転を削除すると、<div>s は正しい位置になり、テキストを要素でラップして代わりに回転させるだけで済みます。

jQuery UI の一部として、よりカスタマイズ可能なウィジェットが既に存在します。アコーディオンのデモ ページを参照してください。CSS の巧妙さがあれば、アコーディオンを垂直にし、タイトル テキストを回転させることもできるはずです :-)

編集 2:テキスト センターの問題を予期しており、既にデモを更新しています。ただし、高さ/幅の制約があるため、テキストが長いとレイアウトが崩れる可能性があります。

編集 3: 水平バージョンは元の計画の一部だったようですが、デモ ページで構成する方法がわかりません。私は間違っていました… 新しいアコーディオンは、来たるべきjQuery UI 1.9 の一部です! したがって、新しい機能が必要な場合は、開発ビルドを試すことができます。

お役に立てれば！

Answer 3

これはあなたが探しているものだと思いますか？

例を追加しました:

html:

<div class="example-date">
  <span class="day">31</span> 
  <span class="month">July</span> 
  <span class="year">2009</span>
</div>

CSS:

.year
{
    display:block;
    -webkit-transform: rotate(-90deg); 
    -moz-transform: rotate(-90deg); 
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3); //For IE support
}

すべての例は、言及されたサイトからのものです。

Answer 4

このように使用できます...

<div id="rot">hello</div>

#rot
{
   -webkit-transform: rotate(-90deg); 
   -moz-transform: rotate(-90deg);    
    width:100px;
}

このフィドルを見てください：http://jsfiddle.net/anish/MAN4g/