(横竖屏切换/强制横屏)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效果在本地好好的,到了服务器效果不流畅。