(横竖屏切换/强制横屏)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');

问题解答

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