我是新来的CSS变换旋转,并想知道如何让它与其父元素中的绝对定位一起工作。谁能帮忙?使用CSS旋转HTML绝对位置
下面是测试片段,大多是我想要做什么,但旋转的文本在错误的地方显示出来。我希望它位于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>