div 旋转90°的问题

  • 将 div 旋转90°后出问题了,看了半天也没解决,下面来介绍下。
  • html 代码是:<div class="rotate90">这里是明细表格,旋转之后前面的字就看不到了,这是什么问题</div>
  • 不旋转的 css 代码:

     .rotate90{
     height: 50px;
     width: 300px;
     border:2px solid red;
     }
  • 正常的显示效果:
    图片描述
  • 将 div 旋转90°的代码:

     .rotate90{
         height: 50px;
         width: 300px;
         border:2px solid red;
    
         -webkit-transform: rotate(90deg);
         -moz-transform: rotate(90deg);
         -o-transform: rotate(90deg);
         -ms-transform: rotate(90deg);
         transform: rotate(90deg);
     }   
    
  • 旋转后的效果

    图片描述

  • 我的问题:为什么旋转之最前面的几个字看不到了?我想要旋转之后的 div 靠浏览器的最右边或者最左边显示要再怎么处理?
  • 有必要的话:QQ = 409223171
阅读 845
评论
    2 个回答

    transform-origin 属性了解一下

      rotate旋转的时候,默认的旋转中心是元素的中心。如果想更改旋转中心,可以设置transform-origin属性。

        撰写回答

        登录后参与交流、获取后续更新提醒