css - 如何在 CSS 中应用文本旋转?

标签 css

我正在努力实现以下目标

enter image description here

这是我目前的成就

enter image description here

通过使用下面的 CSS:

<!DOCTYPE html>
<html>
<head>
<style>
div {
    width: 90px;
    height: 20px;
    background-color: yellow;
    /* Rotate div */   
    transform: rotate(270deg);
}
</style>
</head>
<body>
<div><font color="red"><b>ACTIVE</b></font></div>
</body>
</html>

我正在寻找文本旋转。我怎样才能达到同样的效果?

最佳答案

只需将 transform: rotate(270deg) 的值更改为 transform: rotate(90deg) ,然后添加 transform-origin 属性设置旋转元素的基本位置。

div {
    width: 90px;
    height: 20px;
    background-color: yellow;
    /* Rotate div */   
    transform: rotate(90deg);
    transform-origin: left;
}

它不是文本旋转的样式

关于css - 如何在 CSS 中应用文本旋转?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39607132/

相关文章:

css - 动画迭代计数在 vuejs3 中不起作用?

css - 在 <li> 文本和之前的内容之间添加间距

css - 避免 CSS 类名冲突

css - 两个宽度为 100% 的分隔 div 不匹配

javascript - 如何在pixi.js中注入(inject)css文件

css - css固定标题无法正确显示下拉菜单的问题

html - 如何创建具有可变长度的均衡定义项的定义列表?

html - CSS 'border-right' 是否可以像针一样逐渐变细?

jquery - 在使用 flexbox 时,如何让位于 flex 列中的 3 个按钮在悬停时向左滑出进入 View ?

jQuery 缩略图悬停弹出窗口