html - 使用变换 : origin to center an element

Question

我旋转了一个简单的段落。我试图让它与浏览器左侧 0% 对齐，并从浏览器顶部 50% 对齐。

http://jsfiddle.net/tmyie/fyYS7/

p {
    position: fixed;
    -webkit-transform-origin: left center;
    -webkit-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    -o-transform: rotate(-90deg);

}

我会做 top: 50%; 和 left: 50%，但旋转似乎完全扭曲了这些属性。

I've tried reading these docs, but I'm quite confused.

Answer 1

transform-origin 将给出元素被“钉住”的点以便对其进行转换。当您说 left center 时，它会将元素固定在其垂直方向中间和左边，transform从那里开始，所以transform一旋转显然会隐藏一部分。

你想要的是从顶部和左侧放下它。给出旋转后，您可以使用平移将其滑回 View 中。 http://jsfiddle.net/fyYS7/1/

p {
    position: fixed;
    top:0;
    left:0;
    transform-origin: top left;
    transform: rotate(-90deg) translatex(-100%);
}