html页面横屏

<div class="rotate-box">
    <div class="rotate-main">
        <div class="main">
            <h3>旋转的标题部分</h3>
            <p>旋转的内容部分旋转的内容部分旋转的内容部分旋转的内容部分旋转的内容部分</p>
        </div>
    </div>
</div>

function pageRotate() {
    var pageWidth = $(window).width();
    var pageHeight = $(window).height();

    $(".rotate-box").css({
        width: pageWidth,
        height: pageHeight,
        position: "relative",
    });
    $(".rotate-main").css({
        width: pageHeight,
        height: pageWidth,
        // 旋转90度，整个div是按照中心进行transform的
        transform: "rotate(90deg)",
        // 绝对定位
        position: "absolute",
        // 绝对定位top50%
        top: "50%",
        // 上移div高度的一半
        marginTop: (pageWidth * -1) / 2,
        // 绝对定位left50%
        left: "50%",
        // 左移宽度的一半
        marginLeft: (pageHeight * -1) / 2,
    });
    $(".main h3").css({
        // 设置标题高度
        height: pageWidth / 8,
    });
}
pageRotate();

$(window).resize(function () {
    pageRotate();
});