(横竖屏切换/强制横屏)CSS3 transform 怎样才能中心旋转？

Question

现在有一个canvas，我希望在(手机和平板)竖屏时能够把它以中心作为旋转原点旋转90°(强制横屏)，但用了transform-origin，无论怎样设置数值都不能达到目的，是我哪里搞错了吗？

附CSS代码：

html, body
{
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    background: #000000;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
}

#main  //div
{
    margin: 0;
    width: 100%;
    height: 100%;
    display: block;
    background: #000000;
    z-index: 10;
}

#live  //在main里面的canvas
{
    background-size: cover;
    -moz-background-size: cover;
    -webkit-background-size: cover;
    -o-background-size: cover;
    z-index: 20;
}

@media all and (orientation : landscape)
{
    #live
    {
        margin: 0 auto;
        padding: 0;
        display: block;
        background-size: cover;
        -moz-background-size: cover;
        -webkit-background-size: cover;
        -o-background-size: cover;
        z-index: 20;
    }
}

@media all and (orientation : portrait)
{
    #live
    {
        transform: rotate(90deg);
        transform-origin: center center;
        -ms-transform: rotate(90deg); /* Internet Explorer 9 */
        -ms-transform-origin: center center; /* Internet Explorer 9 */
        -moz-transform: rotate(90deg); /* Firefox */
        -moz-transform-origin: center center; /* Firefox */
        -webkit-transform-origin: center center; /* Safari & Chrome */
        -webkit-transform: rotate(90deg); /* Safari & Chrome */
        -o-transform: rotate(90deg); /* Opera */
        -o-transform-origin: center center; /* Opera */
        margin: 0 auto;
        padding: 0;
        display: block;
        background-size: cover;
        -moz-background-size: cover;
        -webkit-background-size: cover;
        -o-background-size: cover;
        z-index: 20;
    }
}

PS: W3C新出的屏幕方向API应该可以实现这个功能，问题是实在太新了，现在的浏览器似乎都不支持，不信你们可以测试下。

(JavaScript)
screen.orientation.lock('landscape');

Answer 1

用transform的话貌似不太好吧，毕竟旋转以后尺寸还得再改一遍