I have a problem with a specific style. I have a string "Historic" in a div with CSS transform rotate, positioned on a specific part of sibling div. If I change the string by "Historique" (for i18n), the div move.
I wish the div keep at the same place when string has changed. Thank you for answers.
#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>
I got it working by changing the tag class to read like this. Note the transform-origin option.
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;
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.