transorm效果前后的div长宽不一致，是不是div就会被拉伸？

<!DOCTYPE html>
<html>
<head>

  
  <style>
    html,body{
      height:100%;
      width:100%; 
      
    }
    
    #box{
      border:1px solid red;
      height:100px;
      width:inherit;
      text-align:center;
    
    transform: rotate(90deg);
    
      -webkit-transform: rotate(90deg); 
    -webkit-transform-origin:right bottom;
       /*
      */
    }
    
    
  </style>
  
  <script>
  
  
    function t1(){
      
     
      document.getElementById('box').style.transform="rotate(" + 90 + "deg)";
      
    }
  
  </script>
  
  
  
</head>
<body>

  
  <div id='box' >
    <hr/>
    title
    sfsfd
    <button onclick="t1()" >tranform </button>
  </div>
</body>
</html>

比如从

transform转换成

能否保证div内容不会变形？

transform对div中的所有元素都有效

【热门文章】