問題描述

現(xiàn)在有一個(gè)canvas，我希望在(手機(jī)和平板)豎屏?xí)r能夠把它以中心作為旋轉(zhuǎn)原點(diǎn)旋轉(zhuǎn)90°(強(qiáng)制橫屏)，但用了transform-origin，無論怎樣設(shè)置數(shù)值都不能達(dá)到目的，是我哪里搞錯(cuò)了嗎？

附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應(yīng)該可以實(shí)現(xiàn)這個(gè)功能，問題是實(shí)在太新了，現(xiàn)在的瀏覽器似乎都不支持，不信你們可以測試下。

(JavaScript)screen.orientation.lock('landscape');

問題解答

用transform的話貌似不太好吧，畢竟旋轉(zhuǎn)以后尺寸還得再改一遍