logo标签列表

CSS中的变换后位置是什么？

csstransform
19

考虑以下旋转段落并将其定位以使最初的左上角成为其顶部右上角（因此在旋转后成为其顶部右侧角）并位于父块的顶部右侧角的尝试：

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:），使其下降与它旋转前的宽度相同？

NB. 理想情况下，解决方案不应要求为#text设置固定的width:属性，并且不能使用JavaScript。

你的意思是在旋转后，你希望文本对象适合其包装器的右上角，对吗？ - Farid Rn
@faridv，我想把一个 <p> 元素顺时针旋转90度，并将其定位，使得在旋转之前它的左上角所在的位置（因此在旋转之后成为它的右上角）正好与 <p> 元素的父块的右上角位置相同。 - user82216
2
你写这两个属性的顺序无所谓。定位总是在任何变换之前应用的。 - Ana
2
你提到了它在哪些浏览器上失败了，那么你测试过哪些浏览器它是成功的呢？ - Spudley
6个回答
10
您可以对一个元素应用多个变换，而顺序确实很重要。这是最简单的解决方案：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

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

我的做法：

我找到了this这个问题，根据网站名称的含义，“摆弄”代码以获得此行为。我猜想解决方案是使用left: 100%;而不是right: 0;。

（width: 100%;在那里是因为由于某种原因它不是100%，文本会溢出到下一行）

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>

你是否已经成功地使用@keyframes实现了（即获得了我想要的定位）？如果是，请编辑您的答案以包括该解决方案，如果它有效，则我将标记您的答案为已接受 :) - user82216
这不是你想要的吗？@sampablokuper - apaul
0

你可能想要尝试使用翻译选项，它可以作为旋转后的第二个变换函数应用，并将元素放置在你想要的确切位置。 我想没有其他方法可以告诉浏览器在使用纯CSS时，在变换函数之后使用位置属性。

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

-1
将"!important"放在transform行的末尾。
2
请注意，即使您删除了除转换之外的所有内容，它仍然无法正常工作。我认为定位不是导致错误的原因。 - Alex Stone
我不确定我理解你的意思。如果你除了transform!之外什么都拿走，我看不出它怎么可能正常工作。 - user82216
把它的 id 保留在那里，如果你只是转换它，它不会有任何变化。 - Alex Stone
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接