web-dev-qa-db-ja.com

要素を右隅に回転させた絶対位置

右隅に配置され、90度回転するショッピングカートタブの作成方法を理解しようとしています。回転によって位置が自然に混ざりますが、別のラッパーなどにラップする回避策があるかもしれません。

幅を定義する必要がない場合は、追加のポイント。古いブラウザは気にしない

csscss-transitions
13
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 */
}
28
Ana

アナの答え 優れており、正しい方向を示してくれましたが、移動する要素の高さ、行の高さ、位置を明示的に設定しなくても、同じ効果が得られることに気付きました-代わりに、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 適切な測定のために。

8
indextwo

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°の角度になります。

このようにして、回転の原点について考える必要はありません。

3
Fabien Snauwaert

ラッパー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;
    }
0
Toki