移动端横屏旋转问题

需求：旋转屏幕时，需要内容跟着一起旋转，即横屏时内容也是横的。

具体实现：transform rotate

使用此方法时，需要将容器div宽高用js设置px固定，若用100%,vw之类的，会出现问题；

在rotate(90deg)之后，发现内容并未向预期那样正常填满整个屏幕，有偏移值，故需要再加一个

translate来进行移动保证位置正确；

造成这种现象的原因时，元素在屏幕旋转之后的旋转中心，是以元素的当前的几何中心进行的，

并不是按屏幕中心进行的，所以需要计算差值，而差值，就是高度减去宽的的1/2，注意tanslate的时候加一个负号

if(screen.orientation.angle == 90||screen.orientation.angle==-90){
   ifc.style.width = screen.height+'px';
   ifc.style.height = screen.width+'px';
   let translatevalue = (ifc.offsetHeight-ifc.offsetWidth)/2;//ci
   ifc.style.transform = 'rotate('+screen.orientation.angle+'deg)'
   ifc.style.transform = 'rotate(90deg) translate('+(-1*translatevalue+'px')+','+(-1*translatevalue)+'px)';
}
else{
   ifc.style.width = screen.width+'px';
   ifc.style.height = screen.height+'px';
   document.body.style.transform = 'rotate('+screen.orientation.angle+'deg)';
   ifc.style.transform = ''
}