javascript - 通过变换旋转和更改文本来调整宽度 div

Question

我对特定样式有疑问。我在带有 CSS 变换旋转的 div 中有一个字符串“Historic”，位于同级 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

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