html旋转90度后，为什么达到了横屏的效果但是滑动方向却没有改变？

Question

1、为了让某部分占据整个页面且是横屏效果，就将html旋转90度
2、const oBodyWidthFullScreen = document.documentElement.scrollWidth || document.body.scrollWidth;

    const oBodyHeightFullScreen = document.documentElement.scrollHeight || document.body.scrollHeight;
    const oT = (oBodyHeightFullScreen - oBodyWidthFullScreen) / 2;
    const oL = 0 - (oBodyHeightFullScreen - oBodyWidthFullScreen) / 2;
    $('html').css({
      'transform': 'rotate(90deg)',
      '-webkit-transform': 'rotate(90deg)',
      '-moz-transform': 'rotate(90deg)',
      'width': oBodyHeightFullScreen,
      'height': oBodyWidthFullScreen,
      marginTop: oT,
      marginLeft: oL,
    });
    可以实现页面达到一个横屏的效果，但是滑动方向还是没变。
    

3、

其中滑动条部分虽然也相应的纵列排放了，但是滑动方向还是横向的，如果我纵向滑动，没有效果。怎样将滑动方向也改变。