css3 移动端页面全屏旋转，横屏显示。

css3旋转模拟手机横屏。

当手机不能自动旋转时，或有特殊需求。用css3 transform，实现横屏展示。

注意：

1. 相关样式注意横屏的显示。
2. touch的手势方向没有变，依旧是原来方向，若有相关插件，注意方向。
3. 此处用的jq，可以写成js。
4. className取镶套的最外层，例如body。

代码：

/*强制横屏*/
function horizontalScreen(className){
    // transform 强制横屏
    var conW = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
    var conH = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
    // transform: rotate(90deg); width: 667px; height: 375px;transform-origin:28% 50%;
    //var iosTopHe = 0;//若有其他样式判断，写于此
    
    $(className).css({
        "transform":"rotate(90deg) translate("+((conH-conW)/2)+"px,"+((conH-conW)/2)+"px)",
        "width":conH+"px",
        "height":conW+"px",
        //"margin-top":iosTopHe+"px",
        // "border-left":iosTopHe+"px solid #000",
        "transform-origin":"center center",
        "-webkit-transform-origin": "center center"
    });
}

谢谢。