我的开发环境            我使用 Angular8 + ng-zorro-antd 开发微信服务号的推送消息详情页面，用来显示一个表格。

我的目标
    公司服务号会给用户推送消息，点击详情后跳转到WEB页面，这里使用 ng-zorro-antd 的表格显示明细数据，
    行数是会变变动，最少会有一行数据，多时会达到10行左右，那么就导致表格的高度是变动的，这个表格要显示
    总共要显示10列（ 列数是固定的 ），并且将表格组件放在 div 中，所以想要用户点击了“详情”进入页面就通过
    transform:rotate(90deg); 旋转 div 90°，然后用户横屏看手机。
我的做法
    表格所在的 div 指定类名：rotateDiv，下面是 css 中的代码
   

[CSS] 纯文本查看 复制代码

.rotateDiv{ 
    transform: rotate(90deg);
    padding: .5em;
    width: 700px;

    /* 
    随着DIV高度的增加导致旋转的中心变动，最终旋转后上边距会越来越大，
    要恢复则将下面的最小、最大高度取消，使用固定高度*/
    height: 300px; 
    
    /* min-height: 300px;
    max-height: 600px;
    background-color: sandybrown; */

    transition: .3s all;  /* rotate gradually instead of instantly */
    margin-top: 200px;
    position: relative;
    right: 100px;
}

效果解释：

    为了展示真实的手机上的效果，下面来看看手机全屏截图的图片。第一张是只有2行数据时的效果，边距和整体效果都很好
    旋转后顶格到上边和右边
   
    然后看看超过4行的表格，效果就不行了，第四行之后的行就看不到了，并且最要命的是左右不能拖动
    那就是超出的数据完全看不到了（ 这个好像是由于上面 css 代码中指定了 div 的高度 300px 有关 ）
   
    那么再来看看把 300px 去掉，转而设置最小、大高度让 div 高度可变的代码是：
   

[CSS] 纯文本查看 复制代码

.rotateDiv{ 
    transform: rotate(90deg);
    padding: .5em;
    width: 700px;

    /* 
    随着DIV高度的增加导致旋转的中心变动，最终旋转后上边距会越来越大，
    要恢复则将下面的最小、最大高度取消，使用固定高度*/
    /* height: 300px;  */
    
    min-height: 300px;
    max-height: 600px;
    background-color: sandybrown;

    transition: .3s all;  /* rotate gradually instead of instantly */
    margin-top: 200px;
    position: relative;
    right: 100px;
}

    效果如下图（div 给了背景色），可以看到 div 整体距离上边有距离了
   
我的疑问：
    在设置表格所在的 div 最小高度和最大高度后，div 的高度可变了，那么旋转90°时参照的中心点会变
    高度越高，中心点越是向下，导致旋转之后整体到顶边有距离了，那么要怎么消除这个距离？
    或者我的旋转思路整个是错的，有其他方法来旋转？有必要的话：QQ = 409223171
    或者发这个QQ号码邮件也可以，非常感谢你的帮助！
源码和在线案例
源码：https://github.com/chanchaw/rotate
在线演示案例：https://stackblitz.com/github/chanchaw/rotate
要点击右边安装依赖

我的开发环境            我使用 Angular8 + ng-zorro-antd 开发微信服务号的推送消息详情页面，用来显示一个表格。

我的目标
    公司服务号会给用户推送消息，点击详情后跳转到WEB页面，这里使用 ng-zorro-antd 的表格显示明细数据，
    行数是会变变动，最少会有一行数据，多时会达到10行左右，那么就导致表格的高度是变动的，这个表格要显示
    总共要显示10列（ 列数是固定的 ），并且将表格组件放在 div 中，所以想要用户点击了“详情”进入页面就通过
    transform:rotate(90deg); 旋转 div 90°，然后用户横屏看手机。
我的做法
    表格所在的 div 指定类名：rotateDiv，下面是 css 中的代码
   

[CSS] 纯文本查看 复制代码

.rotateDiv{ 
    transform: rotate(90deg);
    padding: .5em;
    width: 700px;

    /* 
    随着DIV高度的增加导致旋转的中心变动，最终旋转后上边距会越来越大，
    要恢复则将下面的最小、最大高度取消，使用固定高度*/
    height: 300px; 
    
    /* min-height: 300px;
    max-height: 600px;
    background-color: sandybrown; */

    transition: .3s all;  /* rotate gradually instead of instantly */
    margin-top: 200px;
    position: relative;
    right: 100px;
}

效果解释：

    为了展示真实的手机上的效果，下面来看看手机全屏截图的图片。第一张是只有2行数据时的效果，边距和整体效果都很好
    旋转后顶格到上边和右边
   
    然后看看超过4行的表格，效果就不行了，第四行之后的行就看不到了，并且最要命的是左右不能拖动
    那就是超出的数据完全看不到了（ 这个好像是由于上面 css 代码中指定了 div 的高度 300px 有关 ）
   
    那么再来看看把 300px 去掉，转而设置最小、大高度让 div 高度可变的代码是：
   

[CSS] 纯文本查看 复制代码

.rotateDiv{ 
    transform: rotate(90deg);
    padding: .5em;
    width: 700px;

    /* 
    随着DIV高度的增加导致旋转的中心变动，最终旋转后上边距会越来越大，
    要恢复则将下面的最小、最大高度取消，使用固定高度*/
    /* height: 300px;  */
    
    min-height: 300px;
    max-height: 600px;
    background-color: sandybrown;

    transition: .3s all;  /* rotate gradually instead of instantly */
    margin-top: 200px;
    position: relative;
    right: 100px;
}

    效果如下图（div 给了背景色），可以看到 div 整体距离上边有距离了
   
我的疑问：
    在设置表格所在的 div 最小高度和最大高度后，div 的高度可变了，那么旋转90°时参照的中心点会变
    高度越高，中心点越是向下，导致旋转之后整体到顶边有距离了，那么要怎么消除这个距离？
    或者我的旋转思路整个是错的，有其他方法来旋转？有必要的话：QQ = 409223171
    或者发这个QQ号码邮件也可以，非常感谢你的帮助！
源码和在线案例
源码：https://github.com/chanchaw/rotate
在线演示案例：https://stackblitz.com/github/chanchaw/rotate
要点击右边安装依赖