div 旋转90°的问题

Question

• 将 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

Answer 1

transform-origin 属性了解一下

Answer 2

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