现在有一个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;     } }