css中怎样让字体旋转90度

admin 轻心小站 关注 LV.19 运营
发表于前端技术学习版块 css,教程

在CSS中,为了让字体旋转90度,我们可以使用transform属性。可以将元素进行旋转、缩放、移动或倾斜。下面是一个样例,我们可以在pre标签中输入如下代码:.rotate { transform:

在CSS中,为了让字体旋转90度,我们可以使用transform属性。可以将元素进行旋转、缩放、移动或倾斜。

下面是一个样例,我们可以在pre标签中输入如下代码:

.rotate {
  transform: rotate(90deg);
} 

这里,我们将一个元素的class设置为rotate,并给它添加一个transform属性,属性值为rotate(90deg)。这表示让该元素绕其中心点旋转90度。

如果想让字体沿水平方向旋转,可以将$rotate()函数中传递的角度值设置为0deg或180deg。如果想让字体沿垂直方向旋转,可以将角度值设置为-90deg或90deg。

除了使用transform属性之外,还可以使用writing-mode属性来旋转字体。writing-mode属性是CSS3中新增的属性,它可以控制文字的书写方向。

下面是一个样例,我们可以在pre标签中输入如下代码:

.rotate {
  writing-mode: vertical-rl;
} 

这里,我们同样将一个元素的class设置为rotate,并给它添加一个writing-mode属性,属性值为vertical-rl。这表示让文字以从下到上的竖直方向书写,并且在书写时顺便把整个元素旋转了90度。

总的来说,无论是使用transform属性还是writing-mode属性,都可以轻松实现让字体旋转90度的效果。

文章说明:

本文原创发布于探乎站长论坛,未经许可,禁止转载。

题图来自Unsplash,基于CC0协议

该文观点仅代表作者本人,探乎站长论坛平台仅提供信息存储空间服务。

评论列表 评论
发布评论

评论: css中怎样让字体旋转90度

粉丝

0

关注

0

收藏

0

已有0次打赏