1

我是 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>

4

2 回答 2

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>

于 2014-11-14T19:33:15.437 回答
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>

于 2014-11-14T19:35:13.240 回答