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

Question

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

附CSS代码：

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

#main
{
    width: 100%;
    height: 100%;
    margin: 0;
    background: black;
    display: block;
    position: absolute;
    z-index: 10;
}

#live
{
    display: block;
    position: relative;
    z-index: 20;
}

@media all and (orientation : landscape)
{
    #live
    {
        
    }
}

@media all and (orientation : portrait)
{
    #live
    {
        transform: rotate(90deg);
        -ms-transform: rotate(90deg); /* Internet Explorer 9 */
        -moz-transform: rotate(90deg); /* Firefox */
        -webkit-transform: rotate(90deg); /* Safari & Chrome */
        -o-transform: rotate(90deg); /* Opera */
        width: 100%;
        height: 100%;
    }
}

通过把网页背景改成白色之后发现main没有真正铺满整个浏览器页面，向下拖动还是会看到白色背景。
而且live这个p并没有铺满浏览器的高度。
现在不知是哪里出了问题。

Answer 1

It seems not very good to use transform. After all, the size has to be changed again after rotation

Answer 2

transform-origin: 50vw 50vw;

Additional note:

@media screen and (orientation : landscape) { 
  html {
    width: 100vh;
    height: 100vm;
    transform: rotate(90deg);
    transform-origin: 50vw 50vw;
  }
}