トランスフォームの回転幅を変更してテキストを変更する

Question

特定のスタイルに問題があります。私は、兄弟divの特定の部分に配置されたCSSの変換回転とdivの文字列 "歴史的"を持っています。 "Historique"（i18nの場合）で文字列を変更すると、divが移動します。

私は、文字列が変更されたときに同じ場所にdivを保存します。答えをありがとう。

#main { 
 
\t margin: 50px; 
 
\t position: relative; 
 
\t width: 300px; 
 
\t background: #eee; 
 
\t border: thin solid #bbb; 
 
} 
 

 
#tag { 
 
\t position: absolute; 
 
    left: -36px; 
 
    padding: 5px; 
 
    font-size: 9px; 
 
    transform: rotate(-90deg); 
 
    background: red; 
 
    color: white; 
 
    bottom: 15px; 
 
    text-transform: uppercase; 
 
    max-height: 20px; 
 
} 
 

 
.content { 
 
\t display: flex; 
 
\t position: relative; 
 
\t padding: 20px; 
 
}

<div id="main"> 
 
\t <div id="tag">Historic</div> 
 
\t <div class="content">a</div> 
 
\t <div class="content">b</div> 
 
\t <div class="content">c</div> 
 
</div>

Answer 1

私はそれがこのように読み取るために、タグのクラスを変更することにより、作業ました。 transform-originオプションに注意してください。

transform-origin: left top 0; 
position: absolute; 
left: -21px; 
padding: 5px; 
font-size: 9px; 
transform: rotate(-90deg); 
background: red; 
color: white; 
bottom: -20px; 
text-transform: uppercase; 
max-height: 20px;