使用變換旋轉出元素的文本旋轉

我已將文本扭曲成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

使用變換旋轉出元素的文本旋轉

回答

相關問題