css文字竖排旋转 |js和css区别

.vertical-text {
writing-mode: vertical-lr; /* 垂直排列，从左到右 */
transform: rotate(180deg); /* 旋转180度 */
font-size: 20px; /* 字体大小 */
}

上面的代码是一个实现CSS文字竖排旋转的例子。首先，大家需要使用“writing-mode”属性将文字垂直排列，然后使用“transform”属性使其旋转180度。由于页面排版方式不同，一些浏览器可能需要添加特定的浏览器前缀。

此外，为了使竖排文字看起来更加整齐，大家可以使用“transform-origin”属性调整元素的旋转基点。将其设置为“top left”可以让文字的左上角成为基点，这样就可以保证每个文字在逆时针方向上排列。

.vertical-text {
writing-mode: vertical-lr; /* 垂直排列，从左到右 */
transform: rotate(180deg); /* 旋转180度 */
font-size: 20px; /* 字体大小 */
transform-origin: top left; /* 旋转基点 */
}

CSS文字竖排旋转可以广泛应用于各种设计中，例如制作海报、广告以及网站页面等等。在实际应用中，大家还可以通过调整字体大小、行高、文字颜色等属性，来使垂直排列的文字更加美观。