现在有一个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的话貌似不太好吧,毕竟旋转以后尺寸还得再改一遍