右隅に配置され、90度回転するショッピングカートタブの作成方法を理解しようとしています。回転によって位置が自然に混ざりますが、別のラッパーなどにラップする回避策があるかもしれません。
幅を定義する必要がない場合は、追加のポイント。古いブラウザは気にしない
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 */
}
アナの答え 優れており、正しい方向を示してくれましたが、移動する要素の高さ、行の高さ、位置を明示的に設定しなくても、同じ効果が得られることに気付きました-代わりに、translate(0, -100%)
を設定するだけです。
body {
margin: 0;
}
#box {
position: relative;
}
.bg {
right: 0;
padding: 1em;
transform: rotate(-90deg) translate(0, -100%);
transform-Origin: 100% 0;
position: absolute;
background: #FF1493;
}
<div id="box">
<div class="bg">
<div class="txt">He's not the Messiah. He's a very naughty boy.</div>
</div>
</div>
...そして jsFiddle 適切な測定のために。
CSSを使用してテキストを90°回転させるには、 writing-mode
。
セットする position: relative;
親divで、次に回転した要素で次のようなものを使用します。
#rot {
position: absolute; /* only handy here because its parent is set to `position: relative;` */
left: 0;
top: 0px;
/* writing-mode: sideways-lr; /* Webkit browsers don't support `sideways-lr` yet */
writing-mode: vertical-rl; /* `vertical-rl` and a rotation will achieve the same effect */
transform: scaleX(-1) scaleY(-1);
height: 100%;
background: rgba(0, 0, 0, 0.1);
text-align: center;
line-height: 2.85;
color: white;
font-weight: bold;
}
最終的に、親divの横にdivが積み重ねられ、テキストは90°の角度になります。
このようにして、回転の原点について考える必要はありません。
ラッパーdivを配置し、子divを回転させて、常に垂直方向と水平方向の中央に配置する必要がある場合は、次のようにしてみてください。
.togglewrap{
position:relative;
float:left;left:20%;top:0;
width:30px;
height:120px;
background-color: #ffde21;
}
.sbartoggle {
background:#f5f5f5;
position:absolute;
left:0;
top:0;
right:0;
bottom:0;
margin:auto;
width:100%;
height:30px;/*equal to parent width*/
line-height:30px;/*center text*/
transform: rotate(-90deg);
background-size:10px 10px;
}