18

考虑以下尝试将段落旋转 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 属性的顺序，但转换是在定位之后应用的。换句话说，浏览器：

  1. #text使其右上角位于父块的右上角的位置，但只有这样
  2. 旋转它，结果现在它的右上角不在父块的右上角。

结果，该transform-origin属性在这里没有多大用处。例如，如果使用的一个transform-origin: top right;则#text需要向下移动它在旋转之前的宽度。

我的问题：有没有办法告诉浏览器在旋转后应用 CSS 定位属性；如果没有，那么是否有一种方法可以#text向下移动（例如使用top:）它在旋转之前的宽度？

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

4

6 回答 6

9

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

于 2014-06-18T17:58:15.560 回答
3

旋转-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%);
   }
于 2018-11-22T12:57:44.627 回答
1

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

于 2013-03-21T16:20:00.407 回答
1

已解决：这里

这是我添加的代码：

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);

我是怎么做到的：

我发现了这个问题，并且正如网站名称所说，“摆弄”了代码以获得这种行为。我想解决方案是left: 100%;而不是right: 0;.

（width: 100%;因为某种原因它不是 100% 并且文本会溢出到下一行）

于 2013-07-10T16:02:33.967 回答
0

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

看到这个演示 - http://codepen.io/anon/pen/klImq

于 2014-01-13T18:17:44.847 回答
-1

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

于 2013-03-19T21:14:35.923 回答