(横竖屏切换)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优艾设计网_设计LOGO); 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; } }

---