php页面强制横屏,html5,css3_(横竖屏切换/强制横屏)CSS3 transform 怎样才能中心旋转？，html5,css3,transform,canvas - phpStudy...

(横竖屏切换/强制横屏)CSS3 transform 怎样才能中心旋转？

现在有一个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并没有铺满浏览器的高度。

现在不知是哪里出了问题。

相关阅读:

Laravel中str_slug()的疑问

编程语言中什么情况出现+0,什么情况出现-0？

有关于扫码APP关联个人信息问题

JS日期问题

关于微信小程序里面this.setData到底怎样或运行的？

算法题：N个数中找M个数，其之和等于target

webpack+react 怎么配置clean

antd开发环境问题

一个面试题，不明白这其中的过程

mp4格式的视频在网页播放器中，需要缓存完才能播放，要怎么解决，播放器用的是ckplayer的

R-2.15.0 opensuse install.packages安装kernlab报错，是因为缺少相应的编译器吗？

怎么写一个模仿优酷等移动端视频半屏 下面可以随意滑动的页面 求代码

jquery选择器能定位到伪元素吗？

webapp开发

AFN 请求的xml解析的问题

关于函数表达式和函数申明的一点小疑惑

.vue文件的es6语法webpack build的时候怎么处理？

我用weixin-java-tools-spring开发微信token验证通不过

forEach()里面使用异步函数，那如何等所有的异步函数都执行完再 进行下一步

js效果在本地好好的，到了服务器效果不流畅。