在 CSS 中转换后的位置？答案

【问题标题】：Position AFTER transform in CSS?在 CSS 中转换后的位置？
【发布时间】：2013-03-08 15:01:47
【问题描述】：

考虑以下尝试将段落旋转 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:）它在旋转之前的宽度？

注意。理想情况下，该解决方案不应要求为 #text 设置固定的 width:，并且不得需要 JavaScript。

【问题讨论】：

您的意思是您希望您的文本对象在旋转后适合其包装的右上角，对吧？
@faridv，我想将 <p> 元素顺时针旋转 90 度并将其定位，以便旋转前的左上角（因此成为其右上角旋转后) 最终与<p> 元素的父块的右上角完全相同。
编写这两个属性的顺序无关紧要。定位总是在任何变换之前应用。
你提到了它失败的浏览器；你测试过哪些浏览器成功了？

标签： css transform

【解决方案1】：

您可以对一个元素应用多个变换，顺序很重要。这是最简单的解决方案：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

【讨论】：

【解决方案2】：

旋转-90度。

 .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%);
   }

【讨论】：

【解决方案3】：

已解决：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% 并且文本会溢出到下一行）

【讨论】：

【解决方案4】：

您可能想尝试使用 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>

【讨论】：

您是否使用@keyframes 成功（即获得我所追求的定位）？如果是这样，请您编辑您的答案以包含该解决方案，如果有效，那么我会将您的答案标记为已接受:)
这不是你想要的吗？ @sampablokuper

【解决方案5】：

您可能想要使用 translate 选项，您可以在旋转后将其应用为第二个变换函数，并将元素放置在您想要的确切位置。我猜没有其他方法可以告诉浏览器在使用纯 css 使用转换函数后使用位置属性。

查看此演示 - http://codepen.io/anon/pen/klImq

【讨论】：

【解决方案6】：

将“！important”放在变换行的末尾。

【讨论】：

请注意，即使您取出除变换之外的所有内容，它仍然不起作用。我不认为定位是导致您的错误的原因
不确定我理解你的意思。如果你把所有东西都去掉，我看不出它是如何工作的！
把 id 留在上面，如果你只是改造它，它什么也做不了