考虑以下尝试将段落旋转 90 度并将其定位,以便最初位于其左上角(因此在旋转后成为其右上角)的 Angular 最终位于右上角父 block 的一 Angular 。
HTML:
<!DOCTYPE html>
<html>
<body>
<div id="outer">
<p id="text">Foo bar</p>
</div>
</body>
</html>
CSS:
#outer {
border: solid 1px red;
width:600px;
height: 600px;
position: relative;
}
#text {
transform: rotate(90deg);
position: absolute;
top: 0;
right: 0;
}
在 OS X 10.6.8 上的 Firefox 19.0.2 中,它失败了。这似乎是因为,尽管给出 CSS 属性的顺序不同,但转换是在定位之后应用的。换句话说,浏览器:
- 放置
#text
使其右上角位于父 block 的右上角,但只有这样 - 旋转它,结果是现在它的右上角不位于父 block 的右上角。
因此,transform-origin
属性在这里用处不大。例如,如果使用 transform-origin: top right;
,则 #text
需要向下移动其旋转前的宽度。
我的问题:有没有办法告诉浏览器在旋转后应用CSS定位属性;如果没有,那么是否有一种方法可以将 #text
向下移动(例如使用 top:
)之前 它被旋转了?
注意。理想情况下,解决方案不应要求为 #text
设置固定的 width:
,并且不得要求 JavaScript。
最佳答案
您可以对一个元素应用多个变换,顺序很重要。这是最简单的解决方案:http://jsfiddle.net/aNscn/41/
#outer {
border: solid 1px red;
width:600px;
height: 600px;
position: relative;
}
#text {
background: lightBlue;
position: absolute;
top: 0;
left: 0;
right: 0;
transform: translate(100%) rotate(90deg);
transform-origin: left top;
-webkit-transform: translate(100%) rotate(90deg);
-webkit-transform-origin: left top;
}
变换原点是应用变换的点。例如,rotate() 函数的变换原点是旋转中心 - https://developer.mozilla.org/en-US/docs/Web/CSS/transform-origin
关于css - 在 CSS 中转换后的位置?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15507941/