考虑以下尝试将一个段落旋转90度并将其定位，使得最初位于其左上角的角（因此在旋转后变为其右上角）最终位于该角的右上角。父块。
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，使其右上角位于父块的右上角，但只有这样因此，transform-origin财产在这里没有多大用处。例如，如果一个人使用transform-origin: top right;，那么#text将需要向下移动它旋转前的宽度。
我的问题：有没有办法告诉浏览器在轮换后应用CSS定位属性;如果没有，那么有没有办法向下移动#text（例如使用top:）它旋转前的宽度？
NB。理想情况下，解决方案不应要求为width:设置固定的#text，并且不得要求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;
}
解决：here
这是我添加的代码：
left: 100%;
width: 100%;
-webkit-transform-origin: left top;
我还添加了一些前缀转换属性，因此它将是跨浏览器
-webkit-transform:rotate(90deg);
-moz-transform:rotate(90deg);
-ms-transform:rotate(90deg);
-o-transform:rotate(90deg);
transform:rotate(90deg);
我是怎么做到的
我发现this问题，正如网站名称所说，“摆弄”代码来获取此行为。我想解决方案是left: 100%;而不是right: 0;。
（width: 100%;在那里是因为由于某种原因它不是100％而且文本会溢出到下一行）
您可能想要使用translate选项，您可以在旋转后将其应用为第二个转换函数，并将元素放在您想要的确切位置。在使用plain css使用transform函数之后，我猜测没有其他方法可以告诉浏览器使用position属性。
看这个演示 - http://codepen.io/anon/pen/klImq
您可能想尝试使用CSS3 @keyframes动画。它将允许您以您喜欢的任何顺序旋转和重新定位。这是一个可能有用的教程：[CSS-Tricks] [1]
.container {
position: relative;
width: 200px;
height: 200px;
border: 1px solid red;
}
p {
border: 1px solid blue;
position: absolute;
top: auto;
right: 0;
display: inline-block;
margin: 0;
animation: 1s rotate 1s both;
}
@keyframes rotate {
0% {
transform-origin: top left;
transform: rotate(0deg);
right:0;
}
50% {
right:0;
}
100% {
transform-origin: top left;
transform: rotate(90deg);
right: -64px;
}
}<div class="container">
<p>some text</p>
</div>旋转-90deg。
.rotate {
position:absolute;
-webkit-transform-origin: left top;
/* Safari */
-webkit-transform: rotate(-90deg) translateX(-100%);
/* Firefox */
-moz-transform: rotate(-90deg) translateX(-100%);
/* IE */
-ms-transform: rotate(-90deg) translateX(-100%);
/* Opera */
-o-transform: rotate(-90deg) translateX(-100%);
}
将“！important”放在变换线的末尾。