使用 css 旋转文本
在本文中，我们将使用 css 来旋转 html 文本。 许多语言（例如中文、日语或韩语）经常使用旋转文本。
此外，在设计网页时，开发人员可能需要将文本旋转一定程度以使用户界面更具吸引力。 在这里，我们使用了两种不同的方法来旋转文本。
使用 css transform 属性旋转文本
在下面的示例中，我们创建了 div 元素并为其指定了元素文本类名称以供识别。 在 div 元素内，我们创建了 元素并在其中添加了文本。
示例代码：
<div class="example-text">
<span>rotated texts.span>
div>
现在，为了旋转
接下来，我们将 transform: rotate(-90deg) css 属性应用于 div 元素以旋转整个内容。 但是，我们使用了 -webkit-transform: rotate(-90deg); 要在 chrome 浏览器中旋转文本，-moz-transform: rotate(-90deg); 在 firefox 浏览器中旋转文本，与 -o-transform: rotate(-90deg); 在 opera 相同。
此外，我们还应用了一些额外的 css 来将 div 元素的位置设置在顶部。 在这里，position: absolute 表示 div 元素的位置将相对于其父元素（即文档主体本身）发生变化。
.example-text {
-webkit-transform: rotate(-80deg);
-moz-transform: rotate(-80deg);
-o-transform: rotate(-80deg);
position: absolute;
top: 40px;
}
在下面的输出中，用户可以看到文本逆时针旋转了 90 度。
如果我们将正度数作为参数传递给 rotate() 方法，它会按顺时针方向旋转内容或文本，用户可以通过下面的示例了解这一点。
.example-text {
-webkit-transform: rotate(80deg);
-moz-transform: rotate(80deg);
-o-transform: rotate(80deg);
position: absolute;
top: 40px;
}
<div class="example-text">
<span>rotated texts.span>
div>
使用 css writing-mode 属性旋转文本
writing-mode css 属性帮助我们改变文本的方向。 使用它，我们可以将文本旋转 90 或 -90 度。
我们可以使用 verticle-rl 作为 writing-mode 属性的值来旋转文本，这样用户就可以从右到左、从上到下阅读文本。
在下面的示例中，我们创建了
html 标记，其中包含一些我们使用 writing-mode:vertical-rl css 属性旋转的文本。
示例代码：
<p class="text">these text rotated by writing-mode: vertical-rl; css property. read it from top to bottom and left to right.p>
.text{
writing-mode: vertical-rl;
height: 200px;
}
如果我们使用 verticle-lr 作为 writing-mode 属性的值，它会旋转文本，使文本可以从左到右、从上到下阅读。
.text{
writing-mode: vertical-lr;
height: 200px;
}
<p class="text">these text rotated by writing-mode: vertical-rl; css property. read it from top to bottom and left to right.p>
上面的输出让用户可以从左到右、从上到下阅读文本。
我们已经学习了旋转文本的不同方法。 第一种方法允许程序员将文本旋转任意度数。
使用第二种方法，程序员可以将文本旋转 90 度，使其可从左到右或从右到左阅读。 所以，推荐使用第一种方法。
转载请发邮件至 1244347461@qq.com 进行申请，经作者同意之后，转载请以链接形式注明出处
本文地址：
相关文章
发布时间：2023/04/28 浏览次数：133 分类：css
-
本文介绍的是著名的 css ui 框架 bootstrap。 我们将讨论使用自定义样式覆盖 bootstrap css 的过程。
使用 css 制作带圆角的 html 表格
发布时间：2023/04/28 浏览次数：245 分类：css
-
这个简短的文章是关于在 html 页面上制作圆角表格的 css 样式。使用 css 制作带圆角的 html 表格 使图像、表格或 div 段的角变圆的属性是 border-radius。
css 设置轮廓 outline 的半径
发布时间：2023/04/28 浏览次数：140 分类：css
-
在本文中，用户将学习如何为 outline 属性设置圆角，与 border-radius 属性相同。 在这里，我们已经解释了将圆角应用于轮廓属性的不同方法。
发布时间：2023/04/28 浏览次数：265 分类：css
-
在本文中，用户将学习仅使用 css 将
使用 css 居中内联块
发布时间：2023/04/28 浏览次数：118 分类：css
-
在本文中，我们将创建多个 html 元素并将其显示设置为 inline-block。 之后，我们将学习使用 display: inline-block 将所有元素居中。
使用 css 添加透明边框
发布时间：2023/04/28 浏览次数：525 分类：css
-
在本文中，我们将讨论在 html 中的图像、按钮或任何其他对象周围创建透明边框。 透明边框是图像或对象周围的边框，可改善用户体验。
发布时间：2023/04/28 浏览次数：704 分类：css
-
有时，在开发网页时，我们将文本放在底部或页脚中，因此我们可能需要在文本下方留一个空格并将文本上移。 我们将学习如何使用 css 从网页底部向上移动文本。
发布时间：2023/04/28 浏览次数：233 分类：css
-
本文提供了使用 css、javascript 和 jquery 使文本闪烁的详细说明。
css 防止文本选择
发布时间：2023/04/28 浏览次数：81 分类：css
-
在本文中，我们讨论了防止文本选择和使用具有 none 值的 user-select 属性。 此外，您还将了解如何为不同的 web 浏览器使用该属性。
