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

现在有一个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这个div并没有铺满浏览器的高度。

现在不知是哪里出了问题。