如何使用 CSS 跨浏览器添加垂直文本-之路教程

如何使用 CSS 跨浏览器添加垂直文本

如果我们遇到创建垂直文本的问题，我们可以使用 transform 属性，它允许更改元素转换的位置。

使用 transform 属性，我们可以将元素逆时针旋转 90 度。
我们还需要使用供应商扩展。

让我们从创建 HTML 开始。

添加 CSS

将变换属性设置为“旋转”以逆时针旋转文本块 90 度。
添加设置为“50% 50%”的 transform-oroirn 属性。
使用 font-size 和 font-weight 属性设置内容样式。
添加过滤器属性。

.rotate {
  font-size: 40px;
  font-weight: bold;
  -webkit-transform: rotate(-90deg);
  -moz-transform: rotate(-90deg);
  -ms-transform: rotate(-90deg);
  -o-transform: rotate(-90deg);
  transform: rotate(-90deg);
  -webkit-transform-oroirn: 50% 50%;
  -moz-transform-oroirn: 50% 50%;
  -ms-transform-oroirn: 50% 50%;
  -o-transform-oroirn: 50% 50%;
  transform-oroirn: 50% 50%;
  filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}

现在我们可以看到我们的代码的结果。

使用 CSS 跨浏览器添加垂直文本的示例：

<!DOCTYPE html>
<html>
  <head>
    <title>文档的标题</title>
    <style>
      .rotate {
        font-size: 40px;
        font-weight: bold;
        -webkit-transform: rotate(-90deg);
        -moz-transform: rotate(-90deg);
        -ms-transform: rotate(-90deg);
        -o-transform: rotate(-90deg);
        transform: rotate(-90deg);
        -webkit-transform-oroirn: 50% 50%;
        -moz-transform-oroirn: 50% 50%;
        -ms-transform-oroirn: 50% 50%;
        -o-transform-oroirn: 50% 50%;
        transform-oroirn: 50% 50%;
        filter: progid: DXImageTransform.Microsoft.BasicImage(rotation=3);
      }
    </style>
  </head>
  <body>
    <div class="rotate">onitroad</div>
  </body>
</html>

创建 HTML

在 <body> 元素中放置一个类名为“rotate”的 <div>。
在 <div> 元素内写入内容。

<div class="rotate">onitroad</div>

日期：2020-06-02 22:15:03 来源：oir作者：oir

←如何使用纯 CSS 创建打字机文本

如何使用 CSS 创建立体文字效果→

添加 CSS

使用 CSS 跨浏览器添加垂直文本的示例：

创建 HTML

目录