(橫豎屏切換/強制橫屏)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的話貌似不太好吧，畢竟旋轉以后尺寸還得再改一遍