使用CSS旋轉HTML絕對位置

我是新來的CSS變換旋轉，並想知道如何讓它與其父元素中的絕對定位一起工作。誰能幫忙？使用CSS旋轉HTML絕對位置

enter image description here

下面是測試片段，大多是我想要做什麼，但旋轉的文本在錯誤的地方顯示出來。我希望它位於foo，bar1和bar2氣泡的左側填充區域中。

<html> 
 
<head> 
 
    <style type="text/css"> 
 
div.item { 
 
\t display: block; 
 
\t border: 1px solid #888; 
 
\t border-radius: 5px; 
 
\t padding: 2px 15px; 
 
} 
 
span.rotated { 
 
\t display: block; 
 
\t position: absolute; 
 
\t left: 0px; 
 
\t bottom: 0px; 
 
\t font-family: Verdana, sans-serif; 
 
\t font-size: smaller; 
 
    -ms-transform:rotate(270deg); /* IE 9 */ 
 
    -moz-transform:rotate(270deg); /* Firefox */ 
 
    -webkit-transform:rotate(270deg); /* Safari and Chrome */ 
 
    -o-transform:rotate(270deg); /* Opera */ 
 
} 
 
</style> 
 
</head> 
 
<body> 
 
<div class="item">foo<span class="rotated">foodoo the voodoo</span> 
 
    <div class="item">bar1<span class="rotated">bar bar bar bar Barbara Ann</span> 
 
\t <div class="item">baz1</div> 
 
\t <div class="item">baz2</div> 
 
\t <div class="item">baz3</div> 
 
\t <div class="item">baz4</div> 
 
\t <div class="item">baz5</div> 
 
\t <div class="item">baz6</div> 
 
    </div> 
 
    <div class="item">bar2<span class="rotated">Barber of Seville</span> 
 
\t <div class="item">baz7</div> 
 
\t <div class="item">baz8</div> 
 
\t <div class="item">baz9</div> 
 
\t <div class="item">baz10</div> 
 
\t <div class="item">baz11</div> 
 
\t <div class="item">baz12</div> 
 
    </div> 
 
</div> 
 
</body> 
 
</html>

來源

2014-11-14 Jason S

啊哈，我錯過了兩件事情：

父元素位置已經被指定（相關工作）需要使用
變換原點

~~我沒有得到但是，當我使用 overflow: hidden時剪輯。嗯....~~ 固定！ overflow: hidden需要進入父分區。

<html> 
 
<head> 
 
    <style type="text/css"> 
 
div.item { 
 
\t display: block; 
 
\t position: relative; 
 
\t overflow: hidden; 
 
\t border: 1px solid #888; 
 
\t border-radius: 5px; 
 
\t padding: 2px 15px; 
 
} 
 
span.rotated { 
 
\t display: block; 
 
\t position: absolute; 
 
\t left: 0px; 
 
\t bottom: 0px; 
 
\t font-family: Verdana, sans-serif; 
 
\t font-size: smaller; 
 
    -ms-transform:rotate(270deg); /* IE 9 */ 
 
\t -ms-transform-origin: 0 0; 
 
    -moz-transform:rotate(270deg); /* Firefox */ 
 
\t -moz-transform-origin: 0 0; 
 
    -webkit-transform:rotate(270deg); /* Safari and Chrome */ 
 
    -webkit-transform-origin:0 0; 
 
    -o-transform:rotate(270deg); /* Opera */ 
 
\t -o-transform-origin: 0 0; 
 
} 
 
</style> 
 
</head> 
 
<body> 
 
<div class="item">foo<span class="rotated">foodoo the voodoo</span> 
 
    <div class="item">bar1<span class="rotated">bar bar bar bar Barbara Ann</span> 
 
\t <div class="item">baz1</div> 
 
\t <div class="item">baz2</div> 
 
\t <div class="item">baz3</div> 
 
\t <div class="item">baz4</div> 
 
\t <div class="item">baz5</div> 
 
\t <div class="item">baz6</div> 
 
    </div> 
 
    <div class="item">bar1<span class="rotated">Barber of Seville</span> 
 
\t <div class="item">baz7</div> 
 
\t <div class="item">baz8</div> 
 
\t <div class="item">baz9</div> 
 
\t <div class="item">baz10</div> 
 
\t <div class="item">baz11</div> 
 
\t <div class="item">baz12</div> 
 
    </div> 
 
</div> 
 
</body> 
 
</html>

來源

2014-11-14 19:33:15

添加以下行到你的CSS。您仍然需要將元素移動到其標稱邊界之外。

這個工作的原因是你必須考慮你開始輪換的位置。默認值是元素的中間，遠離頁面的邊緣。這就是爲什麼transform-origin: top left;有效。

transform-origin: top left; 
transform: rotate(270deg);

<html> 
 
<head> 
 
    <style type="text/css"> 
 
div.item { 
 
\t display: block; 
 
\t border: 1px solid #888; 
 
\t border-radius: 5px; 
 
\t padding: 2px 15px; 
 
} 
 
span.rotated { 
 
\t display: block; 
 
\t position: absolute; 
 
\t left: 0px; 
 
\t bottom: 0px; 
 
\t font-family: Verdana, sans-serif; 
 
\t font-size: smaller; 
 
    transform-origin:top left; 
 
    -ms-transform:rotate(270deg); /* IE 9 */ 
 
    -moz-transform:rotate(270deg); /* Firefox */ 
 
    -webkit-transform:rotate(270deg); /* Safari and Chrome */ 
 
    -o-transform:rotate(270deg); /* Opera */ 
 
    transform: rotate(270deg); /* Standards */ 
 
} 
 
</style> 
 
</head> 
 
<body> 
 
<div class="item">foo<span class="rotated">foodoo the voodoo</span> 
 
    <div class="item">bar1<span class="rotated">bar bar bar bar Barbara Ann</span> 
 
\t <div class="item">baz1</div> 
 
\t <div class="item">baz2</div> 
 
\t <div class="item">baz3</div> 
 
\t <div class="item">baz4</div> 
 
\t <div class="item">baz5</div> 
 
\t <div class="item">baz6</div> 
 
    </div> 
 
    <div class="item">bar2<span class="rotated">Barber of Seville</span> 
 
\t <div class="item">baz7</div> 
 
\t <div class="item">baz8</div> 
 
\t <div class="item">baz9</div> 
 
\t <div class="item">baz10</div> 
 
\t <div class="item">baz11</div> 
 
\t <div class="item">baz12</div> 
 
    </div> 
 
</div> 
 
</body> 
 
</html>

來源

2014-11-14 19:35:13

使用CSS旋轉HTML絕對位置

回答

相關問題