絶対位置を右端に回転させた

右はショッピングカートのタブを作成する方法を理解しようとしていて、90度回転しています。回転によって自然に位置がミックスされますが、別のラッパーなどにラップする回避策があります。絶対位置を右端に回転させた

幅を定義する必要がない場合は余分な点があります。私は古いブラウザを気にしません

2012-08-15 client

http://jsfiddle.net/Dvkgz/ – client

transform-originはどうですか？ DEMOを参照してください。

関連するCSS：

#box { 
    position: relative; 
} 
.bg { 
    right: 40px; /* same as height */ 
    height: 40px; 
    transform: rotate(-90deg); 
    transform-origin: 100% 0; 
    position: absolute; 
    line-height: 40px; /* same as height, for vertical centering */ 
}

出典

2012-08-15 16:59:17 Ana

私は決してそれを実現できませんでした。私はそれを行ってあげるよ。ありがとうございました！ – client

この素晴らしい提案をありがとう！異なるブラウザでの 'tranform-origin'のサポートに関する権威的な記述はありますか？ [MDN記事]（https://developer.mozilla.org/en-US/docs/Web/CSS/transform-origin#Browser_compatibility）は現時点でかなり不完全です。 – bfncs

私が知る限り、変換をサポートするすべてのブラウザでサポートされています。 http://caniuse.com/#feat=transforms2d – Ana

Ana's answerが優れていると正しい方向に私を指摘し、私はあなたが明示的要素の高さは、行の高さと位置を設定しなくても、同じ効果を得ることができ実現しました

body { 
 
    margin: 0; 
 
} 
 

 
#box { 
 
    position: relative; 
 
} 
 

 
.bg { 
 
\t right: 0; 
 
\t padding: 1em; 
 
\t transform: rotate(-90deg) translate(0, -100%); 
 
\t transform-origin: 100% 0; 
 
\t position: absolute; 
 
\t background: #FF1493; 
 
}

<div id="box"> 
 
\t <div class="bg">   
 
\t \t <div class="txt">He's not the Messiah. He's a very naughty boy.</div> 
 
\t </div> 
 
</div>

：ちょうど translate(0, -100%)を設定し、代わりに - あなたが移動します

...およびjsFiddleを参考にしてください。

出典

2016-04-01 12:58:54 indextwo

テキストをもう一度読みたい場合は、.txt {transform：rotate（180deg）;を追加してください。 } – mtness

あなたのスニペットとフィドルにタイプミスがあります.BTW - クラスでなければなりません。clssではありません。 – mtness

@mtnessよく調べられました。 – indextwo

絶対位置を右端に回転させた

答えて

関連する問題