html - 使用变换:原点将元素居中

我旋转了一个简单的段落。我试图通过0%将它与浏览器左侧对齐，并从浏览器顶部对齐。
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);

}

我会做50%和top: 50%;，但旋转似乎完全扭曲了这些属性。
I've tried reading these docs, but I'm quite confused.

最佳答案

transform-origin将给出元素被“钉住”的点，以便对其进行转换。当您说left center时，它会将元素钉在其垂直的中间和左侧，转换从那里开始，因此转换将在其旋转时明显隐藏部分元素。
你要的是把它从上往下扔。给定旋转后，可以使用“平移”将其滑回视图中。
http://jsfiddle.net/fyYS7/1/

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

关于html - 使用变换:原点将元素居中，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/22452698/