使用transform：origin来居中一个元素

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时，它会在垂直中间和左边钉住元素，变换从那里开始因此变换一旦旋转就会明显隐藏部分内容。

你想要的是从顶部和左边放下它。一旦给出旋转，您可以使用translate将其滑回视图中。 http://jsfiddle.net/fyYS7/1/

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