2014-11-14 110 views
1

我是新来的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>

回答

3

啊哈,我错过了两件事情:

  • 父元素位置已经被指定(相关工作)需要使用
  • 变换原点

我没有得到但是,当我使用 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>

0

添加以下行到你的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>