使用CSS旋转HTML绝对位置
杰森
我是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> 杰森
啊哈，我错过了两件事：
- 必须指定父元素位置（相对作品）
- 需要使用转换原点
固定！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>本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
编辑于
相关文章
TOP 榜单
- 1
Linux的官方Adobe Flash存储库是否已过时？
- 2
如何使用HttpClient的在使用SSL证书，无论多么“糟糕”是
- 3
错误：“ javac”未被识别为内部或外部命令，
- 4
在 Python 2.7 中。如何从文件中读取特定文本并分配给变量
- 5
Modbus Python施耐德PM5300
- 6
为什么Object.hashCode（）不遵循Java代码约定
- 7
如何检查字符串输入的格式
- 8
检查嵌套列表中的长度是否相同
- 9
错误TS2365：运算符'！=='无法应用于类型'“（”'和'“）”'
- 10
如何自动选择正确的键盘布局？-仅具有一个键盘布局
- 11
如何正确比较 scala.xml 节点？
- 12
在令牌内联程序集错误之前预期为 ')'
- 13
如何在JavaScript中获取数组的第n个元素？
- 14
如何将sklearn.naive_bayes与（多个）分类功能一起使用？
- 15
ValueError：尝试同时迭代两个列表时，解包的值太多（预期为 2）
- 16
如何监视应用程序而不是单个进程的CPU使用率？
- 17
解决类Koin的实例时出错
- 18
ES5的代理替代
- 19
有什么解决方案可以将android设备用作Cast Receiver？
- 20
VBA 自动化错误：-2147221080 (800401a8)
- 21
套接字无法检测到断开连接
我来说两句