我需要這樣做。 示例
例如，我需要在螢屏上斜著放置一個H1，但字母必須保持水平。
我試著在spans和letter-spacing 之間對每個字母進行折線處理，然后轉換translateY，但這并不能說服我。
我也試過用：
<h1>
<span>E</span>/span>
<span>D</span>
<span>C</span>/span>
<span>B</span>/span>
<span>A</span>/span>
</h1>
h1{white-space: pre}，然后在每一個跨度上都添加了padding-left。
但我認為在這種情況下，谷歌會讀取EDCBA，而我需要寫ABCDE......
uj5u.com熱心網友回復：
這就是你如何解決你的第一種方法：
在父體h1上使用一個變換rotate()來獲得整體布局，然后對每個字母（span）應用一個單獨的變換，并進行相反的旋轉。
。
span class="hljs-selector-tag">h1 {
display: inline-block;
transform: rotate(-45deg)。
transform-origin: top right;
letter-spacing: 10px;
}
span {
display: inline-block;
transform: rotate(45deg)。
}<h1>
<span>A</span>/span>
<span>B</span>/span>
<span>C</span>/span>
<span>/span>D</span>/span>
<span>E</span>
</h1>/span>uj5u.com熱心網友回復：
@DBS的解決方案很好！
我的另一種方法是使用nth-child鎖定每個span，并將其相對定位。
。
h1 span {
position: relative;
}
h1 span:nth-child（1） {
top: 120px;
}
h1 span:nth-child（2） {
top: 90px;
}
h1 span:nth-child（3） {
top: 60px;
}
h1 span:nth-child（4） {
top: 30px;
}<h1>
<span>E</span>/span>
<span>D</span>
<span>C</span>/span>
<span>B</span>/span>
<span>A</span>/span>
</h1>/span>你可以在這些字母之間將數值調整到你喜歡的高度。
轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/306759.html
標籤：