(横竖屏切换/强制横屏)CSS3 transform 怎样才能中心旋转？
现在有一个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');
