css文字旋转特效代码 |微软css技术支持

.rotate-text {
display: inline-block; /* 将文本包裹在块级元素中 */
transform: rotate(-90deg); /* 将元素旋转90度 */
transform-origin: top left; /* 设置旋转中心为左上角 */
}

以上代码中，大家首先创建了一个class名为“rotate-text”的样式表。然后，大家在此样式表中设置了三个属性：

• display: inline-block;：大家将文本包裹在块级元素中，以便大家可以应用旋转样式。
• transform: rotate(-90deg);：大家将元素旋转90度，以使文本内容从垂直排列变为水平排列。
• transform-origin: top left;：大家设置旋转中心为左上角，这样文本的首字母会在页面的左上角展示。

要使用上述样式，大家只需将其应用于一个包含文本的HTML元素：

<div class="rotate-text">这是一个旋转的文本</div>

现在，大家可以在浏览器中看到文本旋转了90度，并且文本的首字母展示在页面的左上角。大家可以通过更改旋转角度和旋转中心来修改文本的外观。