当前位置：首页 > 前端开发 > 正文

html如何把文字旋转90度

admin
前端开发
2025-07-13
8

HTML中，可通过CSS的transform属性实现文字旋转90度，如：文字

HTML中，可以通过CSS的transform属性来实现文字旋转90度的效果,以下是几种常见的方法：

使用transform: rotate()属性

这是最直接的方法，通过CSS的transform属性中的rotate()函数来设置旋转角度。

步骤：

创建HTML元素：在HTML中创建一个包含要旋转文字的元素，例如一个<div>或<p>
添加CSS样式：在CSS中为该元素添加transform: rotate(90deg)样式。

示例代码：

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0">文字旋转90度</title> <style> .rotate-text { transform: rotate(90deg); / 其他样式 / font-size: 20px; color: #333; } </style> </head> <body> <div class="rotate-text">旋转90度的文字</div> </body> </html>

解释：

html如何把文字旋转90度第1张

transform: rotate(90deg)：将元素顺时针旋转90度，如果需要逆时针旋转，可以使用rotate(-90deg)。
font-size和color：可以根据需要调整字体大小和颜色。

使用transform-origin属性

默认情况下，transform属性的旋转中心是元素的中心，如果需要改变旋转中心，可以使用transform-origin属性。

示例代码：

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0">文字旋转90度</title> <style> .rotate-text { transform: rotate(90deg); transform-origin: left top; / 设置旋转中心为左上角 / font-size: 20px; color: #333; } </style> </head> <body> <div class="rotate-text">旋转90度的文字</div> </body> </html>

解释：

html如何把文字旋转90度第2张

transform-origin: left top：将旋转中心设置为元素的左上角，这样，文字会围绕左上角旋转,而不是元素的中心。

使用display: inline-block和writing-mode属性

另一种方法是使用writing-mode属性来改变文本的书写方向，但这通常用于垂直文本,而不是简单的旋转。

示例代码：

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0">文字旋转90度</title> <style> .vertical-text { writing-mode: vertical-rl; / 从右到左垂直排列 / transform: rotate(180deg); / 旋转180度以使其从左到右 / font-size: 20px; color: #333; } </style> </head> <body> <div class="vertical-text">旋转90度的文字</div> </body> </html>

解释：

writing-mode: vertical-rl：将文本设置为从右到左垂直排列。
transform: rotate(180deg)：将文本旋转180度,使其从左到右显示。

兼容性考虑

虽然现代浏览器普遍支持CSS的transform属性,但在一些旧版浏览器中可能需要添加前缀以确保兼容性。

html如何把文字旋转90度第3张

示例代码：

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0">文字旋转90度</title> <style> .rotate-text { -webkit-transform: rotate(90deg); / Safari and Chrome / -moz-transform: rotate(90deg); / Firefox / -ms-transform: rotate(90deg); / IE 9 / -o-transform: rotate(90deg); / Opera / transform: rotate(90deg); / Standard syntax / font-size: 20px; color: #333; } </style> </head> <body> <div class="rotate-text">旋转90度的文字</div> </body> </html>

解释：