我是css变换旋转的新手,想知道如何让它在其父元素中使用绝对定位。有人可以帮忙吗?
这是一个主要完成我想要的测试片段,但旋转的文本显示在错误的位置。我希望它位于foo,bar1和bar2气泡的左边填充区域。
<html>
<head>
<style type="text/css">
div.item {
display: block;
border: 1px solid #888;
border-radius: 5px;
padding: 2px 15px;
}
span.rotated {
display: block;
position: absolute;
left: 0px;
bottom: 0px;
font-family: Verdana, sans-serif;
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>
<div class="item">baz1</div>
<div class="item">baz2</div>
<div class="item">baz3</div>
<div class="item">baz4</div>
<div class="item">baz5</div>
<div class="item">baz6</div>
</div>
<div class="item">bar2<span class="rotated">Barber of Seville</span>
<div class="item">baz7</div>
<div class="item">baz8</div>
<div class="item">baz9</div>
<div class="item">baz10</div>
<div class="item">baz11</div>
<div class="item">baz12</div>
</div>
</div>
</body>
</html>
答案 0 :(得分:3)
但是,当我使用修正了! overflow: hidden
时,我不会剪辑。嗯.... overflow: hidden
需要进入父div。
<html>
<head>
<style type="text/css">
div.item {
display: block;
position: relative;
overflow: hidden;
border: 1px solid #888;
border-radius: 5px;
padding: 2px 15px;
}
span.rotated {
display: block;
position: absolute;
left: 0px;
bottom: 0px;
font-family: Verdana, sans-serif;
font-size: smaller;
-ms-transform:rotate(270deg); /* IE 9 */
-ms-transform-origin: 0 0;
-moz-transform:rotate(270deg); /* Firefox */
-moz-transform-origin: 0 0;
-webkit-transform:rotate(270deg); /* Safari and Chrome */
-webkit-transform-origin:0 0;
-o-transform:rotate(270deg); /* Opera */
-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>
<div class="item">baz1</div>
<div class="item">baz2</div>
<div class="item">baz3</div>
<div class="item">baz4</div>
<div class="item">baz5</div>
<div class="item">baz6</div>
</div>
<div class="item">bar1<span class="rotated">Barber of Seville</span>
<div class="item">baz7</div>
<div class="item">baz8</div>
<div class="item">baz9</div>
<div class="item">baz10</div>
<div class="item">baz11</div>
<div class="item">baz12</div>
</div>
</div>
</body>
</html>
&#13;
答案 1 :(得分:0)
将以下行添加到CSS中。您仍然需要将元素移动到其标称边界之外。
这样做的原因是你必须考虑你开始轮换的地方。默认值是元素的中间位置,远离页面边缘。这就是transform-origin: top left;
有效的原因。
transform-origin: top left;
transform: rotate(270deg);
<html>
<head>
<style type="text/css">
div.item {
display: block;
border: 1px solid #888;
border-radius: 5px;
padding: 2px 15px;
}
span.rotated {
display: block;
position: absolute;
left: 0px;
bottom: 0px;
font-family: Verdana, sans-serif;
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>
<div class="item">baz1</div>
<div class="item">baz2</div>
<div class="item">baz3</div>
<div class="item">baz4</div>
<div class="item">baz5</div>
<div class="item">baz6</div>
</div>
<div class="item">bar2<span class="rotated">Barber of Seville</span>
<div class="item">baz7</div>
<div class="item">baz8</div>
<div class="item">baz9</div>
<div class="item">baz10</div>
<div class="item">baz11</div>
<div class="item">baz12</div>
</div>
</div>
</body>
</html>