使用变换旋转和更改文本来调整宽度 div

Question

我对特定样式有疑问。我在 div 中有一个字符串 "Historic"，带有 CSS 变换旋转，位于同级 div 的特定部分。如果我将字符串更改为 "Historique"（对于 i18n），div 移动。

我希望 div 在字符串更改时保持在同一位置。谢谢你的回答。

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

#tag {
 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 {
 display: flex;
 position: relative;
 padding: 20px;
}

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

Answer 1

我通过将标签 class 更改为这样来让它工作。注意 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;

使用变换旋转和更改文本来调整宽度 div

Adapt width div with transform rotate and change text

javascript

css

css-transforms