使用变换旋转出元素的文本旋转

我已将文本扭曲成270度角。我的问题是在另一个div中对齐它。使用变换旋转出元素的文本旋转

这里是图像之前我扭文：

enter image description here

，这是我的我的，为了这个代码：

#infoside { 
    background-color: #00ff00; 
    float: right; 
    height: 100%; 
    width: 41%; 
} 

#tabbings { 
    float: left; 
    width: 15%; 
    height: 100%; 
    background-color: #ffff00; 
} 
#tab_panels { 
    float: right; 
    width: 85%; 
    height: 100%; 
    background-color: #00ffff; 
} 

#client_info { 
    height: 100px; 
    width: 100%; 
} 


<div id="infoside"> 
    <div id="tabbings"> 
     <div id="client_info" class="active_tabbing"> 
      <div id="text_here" style="width: 100px; height: 25%; text-align: center"> 
       CLIENT INFO 
      </div> 
     </div> 
     <div class="clear"></div> 
    </div> 
    <div id="tab_panels"></div> 
    <div class="clear"></div> 
</div>

，当我这个类添加到div与编号text_here，将扭曲文本下面的图像将是结果

.twist_text { 
    -moz-transform: rotate(270deg); 
    -webkit-transform: rotate(270deg) ; 
    -o-transform: rotate(270deg) ; 
    -ms-transform: rotate(270deg) ; 
    transform: rotate(270deg); 
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1); 
}

enter image description here

我该如何让这里面的广场？

谢谢。

来源

2014-02-21 oneofakind

此外，也没有这里使用 –

像这样的JavaScript ？ http://jsbin.com/govebogo/2/edit –

@ Mr.Alien OH !!我忘了。没有JavaScript。对不起。这是所有的CSS和HTML。对不起。我的意思是实现第二个屏幕截图，将文本放在上面的框中。 – oneofakind

您需要在CSS上使用transform-origin:0 0;来设置div左上方的旋转轴。默认情况下，它设置为50% 50%，您可以将其设置为您喜欢的任何值。

来源

2014-02-21 12:38:59 Ermir

我想补充一点，你应该知道浏览器的支持和使用这个时需要的前缀：http://caniuse.com/transforms2d –

我增加了转换原点，但没有0 0值。调整它，并工作！我用下面的答案来实现它。谢谢。 – oneofakind

如果我得到它........ 试试这个

.twist_text { 
    -moz-transform: rotate(270deg) translateX(-35px); 
    -webkit-transform: rotate(270deg) translateX(-35px) ; 
    -o-transform: rotate(270deg) translateX(-35px) ; 
    -ms-transform: rotate(270deg) translateX(-35px) ; 
    transform: rotate(270deg) translateX(-35px); 
}

之后，它看起来像下面 enter image description here

来源

2014-02-21 12:47:58 Abhineet

在这项工作中，设置元素的“transform-origin”可能更有意义，因为如果他更改了尺寸，则必须再次更改所有翻译。 – Kroltan

与变换原点，我们可以改变元素的旋转点。但是这里我们需要改变X轴上的位置。只添加transform-origin元素从它的父级div中跳出。 – Abhineet

让我尝试一下这段时间.. – oneofakind

使用变换旋转出元素的文本旋转

回答

相关问题