Question

考虑以下尝试将一个段落旋转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。

Answer 1

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

Answer 2

您可以对元素应用多个转换，订单也很重要。这是最简单的解决方案：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;
}

Answer 3

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

Answer 4

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

请参阅此演示 - http://codepen.io/anon/pen/klImq

Answer 5

旋转-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%);

}

Answer 6

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

在CSS中定位AFTER变换？

6 个答案: