如何在CSS中应用文本旋转？

Question

我正在努力实现以下目标

这是我迄今取得的成就

使用以下css

myCtrl.elementList

好吧，我正在寻找文字轮换......我怎样才能实现同样的目标呢？

提前致谢。

Answer 1

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

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

这不是文字轮换的风格

Answer 2

使用CSS3 @keyframes动画来获取它。请查看以下代码段：

＆＃13;

＆＃13;

div {
    width: 90px;
    height: 20px;
    background-color: yellow;
    /* Rotate div */   
    transform: rotate(270deg);
    position:relative;
    top:40px;
}
b{ 
  position:absolute;
  transform: rotate(180deg);
  -webkit-animation: rotate 3s; 
  -moz-animation: rotate 3s; 
  animation: rotate 3s;
}
@-webkit-keyframes rotate {
    0%   {transform: rotate(360deg);}
    100% {transform: rotate(180deg);}
}

@-moz-keyframes rotate {
    0%   {transform: rotate(360deg);}
    100% {transform: rotate(180deg);}
}

@keyframes rotate {
    0%   {transform: rotate(360deg);}
    100% {transform: rotate(180deg);}
}

＆＃13;

<div><font color="red"><b>ACTIVE</b></font></div>

＆＃13;

＆＃13;

＆＃13;

Answer 3

转动您的<b> tag并尝试

，而不是旋转您的div

div {
    width: 20px;
    height: 110px;
    background-color: yellow;
    display:block;
    color:red;
    padding-top:40px;
  }
div > b{
   transform: rotate(-270deg);
   display:block;
   }  

<div><b>ACTIVE</b></div>