現在有一個canvas，我希望在(手機和平板)豎屏時能夠把它以中心作為旋轉原點旋轉90°(強制橫屏)，但用了transform-origin，無論怎樣設置數值都不能達到目的，是我哪里搞錯了嗎？

附CSS代碼：

html, body

{

width: 100%;

height: 100%;

margin: 0;

padding: 0;

background: white;

-webkit-touch-callout: none;

-webkit-user-select: none;

}

#main

{

width: 100%;

height: 100%;

margin: 0;

background: black;

display: block;

position: absolute;

z-index: 10;

}

#live

{

display: block;

position: relative;

z-index: 20;

}

@media all and (orientation : landscape)

{

#live

{

}

}

@media all and (orientation : portrait)

{

#live

{

transform: rotate(90deg);

-ms-transform: rotate(90deg); /* Internet Explorer 9 */

-moz-transform: rotate(90deg); /* Firefox */

-webkit-transform: rotate(90deg); /* Safari & Chrome */

-o-transform: rotate(90deg); /* Opera */

width: 100%;

height: 100%;

}

}

通過把網頁背景改成白色之后發現main沒有真正鋪滿整個瀏覽器頁面，向下拖動還是會看到白色背景。

而且live這個div并沒有鋪滿瀏覽器的高度。

現在不知是哪里出了問題。

總結

以上是生活随笔為你收集整理的html 文本横竖切换,(横竖屏切换/强制横屏)CSS3 transform 怎样才能中心旋转？的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。