CSSが回転して回転する

Question

私は長いテーブルを持っていて回転させたいのですが、回転させると左に切り取られるという問題があります。あなたが見ることができるように、テーブルの左側の部分が切り取られ

.rotate { 
 
    /* Safari */ 
 
    -webkit-transform: rotate(90deg); 
 
    
 
    /* Firefox */ 
 
    -moz-transform: rotate(90deg); 
 
    
 
    /* IE */ 
 
    -ms-transform: rotate(90deg); 
 
    
 
    /* Opera */ 
 
    -o-transform: rotate(90deg); 
 
    
 
    /* Internet Explorer */ 
 
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3); 
 
}

<table class="rotate"> 
 
    <tr> 
 
    <td>Lorem Ipsum Dolor Sit Amet Lorem Ipsum Dolor Sit Amet Lorem Ipsum Dolor Sit Amet Lorem Ipsum Dolor Sit Amet Lorem Ipsum Dolor Sit Amet Lorem Ipsum Dolor Sit Amet Lorem Ipsum Dolor Sit Amet Lorem Ipsum Dolor Sit Amet Lorem Ipsum Dolor Sit Amet Lorem Ipsum Dolor Sit Amet Lorem Ipsum Dolor Sit Amet Lorem Ipsum Dolor Sit Amet Lorem Ipsum Dolor Sit Amet</td> 
 
    <td>Lorem Ipsum Dolor Sit Amet Lorem Ipsum Dolor Sit Amet Lorem Ipsum Dolor Sit Amet Lorem Ipsum Dolor Sit Amet Lorem Ipsum Dolor Sit Amet Lorem Ipsum Dolor Sit Amet Lorem Ipsum Dolor Sit Amet Lorem Ipsum Dolor Sit Amet Lorem Ipsum Dolor Sit Amet Lorem Ipsum Dolor Sit Amet Lorem Ipsum Dolor Sit Amet Lorem Ipsum Dolor Sit Amet Lorem Ipsum Dolor Sit Amet Lorem Ipsum Dolor Sit Amet Lorem Ipsum Dolor Sit Amet Lorem Ipsum Dolor Sit Amet</td> 
 
    <td>Lorem Ipsum Dolor Sit Amet</td> 
 
    <td>Lorem Ipsum Dolor Sit Amet</td> 
 
    <td>Lorem Ipsum Dolor Sit Amet</td> 
 
    </tr> 
 
    <tr> 
 
    <td>Lorem Ipsum</td> 
 
    <td>Lorem Ipsum</td> 
 
    <td>Lorem Ipsum</td> 
 
    <td>Lorem Ipsum</td> 
 
    <td>Lorem Ipsum Lorem Ipsum Dolor Sit Amet Lorem Ipsum Dolor Sit Amet Lorem Ipsum Dolor Sit Amet Lorem Ipsum Dolor Sit Amet Lorem Ipsum Dolor Sit Amet Lorem Ipsum Dolor Sit Amet Lorem Ipsum Dolor Sit Amet Lorem Ipsum Dolor Sit Amet Lorem Ipsum Dolor Sit Amet Lorem Ipsum Dolor Sit Amet Lorem Ipsum Dolor Sit Amet Lorem Ipsum Dolor Sit Amet Lorem Ipsum Dolor Sit Amet Lorem Ipsum Dolor Sit Amet Lorem Ipsum Dolor Sit Amet Lorem Ipsum Dolor Sit Amet Lorem Ipsum Dolor Sit Amet Lorem Ipsum Dolor Sit Amet Lorem Ipsum Dolor Sit Amet Lorem Ipsum Dolor Sit Ametv</td> 
 
    </tr> 
 
</table>

：ここに私のバイオリンです。とにかくこのテーブルを作成するには、切り取られていませんか？私はテーブルの内容が様々なので余裕を使うことはできません。ときどき長くても短くてもよい。

Answer 1

デフォルトでは、要素は要素の中心から変形します。あなたが探しているのはtransform-origin: bottomで、要素の下に由来すると変換設定することです：

.rotate { 
 
    /* Safari */ 
 
    -webkit-transform: rotate(90deg); 
 
    
 
    /* Firefox */ 
 
    -moz-transform: rotate(90deg); 
 
    
 
    /* IE */ 
 
    -ms-transform: rotate(90deg); 
 
    
 
    /* Opera */ 
 
    -o-transform: rotate(90deg); 
 
    
 
    /* Internet Explorer */ 
 
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3); 
 
    
 
    /* Origin */ 
 
    transform-origin: bottom; 
 
}

<table class="rotate"> 
 
    <tr> 
 
    <td>Lorem Ipsum Dolor Sit Amet</td> 
 
    <td>Lorem Ipsum Dolor Sit Amet</td> 
 
    <td>Lorem Ipsum Dolor Sit Amet</td> 
 
    <td>Lorem Ipsum Dolor Sit Amet</td> 
 
    <td>Lorem Ipsum Dolor Sit Amet</td> 
 
    </tr> 
 
    <tr> 
 
    <td>Lorem Ipsum</td> 
 
    <td>Lorem Ipsum</td> 
 
    <td>Lorem Ipsum</td> 
 
    <td>Lorem Ipsum</td> 
 
    <td>Lorem Ipsum</td> 
 
    </tr> 
 
</table>

は、この情報がお役に立てば幸い！ :)

Answer 2

transform-originの値を計算すると、pxのように次のように問題を修正する必要があります。

var height = $(".rotate").outerHeight(); 
 

 
var xaxis = height/2 + 'px'; 
 
var yaxis = height/2 + 'px'; 
 

 
$('.rotate').css({ 
 
    'transform-origin': '' + xaxis + ' ' + yaxis + ' 0px' 
 
});

.rotate { 
 
    background-color: lightgray; 
 
    border: 1px solid gray; 
 
    transform: rotate(90deg); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table class="rotate"> 
 
    <tr> 
 
    <td>Lorem Ipsum Dolor Sit Amet Lorem Ipsum Dolor Sit Amet Lorem Ipsum Dolor Sit Amet Lorem Ipsum Dolor Sit Amet Lorem Ipsum Dolor Sit Amet Lorem Ipsum Dolor Sit Amet Lorem Ipsum Dolor Sit Amet Lorem Ipsum Dolor Sit Amet Lorem Ipsum Dolor Sit Amet Lorem 
 
     Ipsum Dolor Sit Amet Lorem Ipsum Dolor Sit Amet Lorem Ipsum Dolor Sit Amet Lorem Ipsum Dolor Sit Amet</td> 
 
    <td>Lorem Ipsum Dolor Sit Amet Lorem Ipsum Dolor Sit Amet Lorem Ipsum Dolor Sit Amet Lorem Ipsum Dolor Sit Amet Lorem Ipsum Dolor Sit Amet Lorem Ipsum Dolor Sit Amet Lorem Ipsum Dolor Sit Amet Lorem Ipsum Dolor Sit Amet Lorem Ipsum Dolor Sit Amet Lorem 
 
     Ipsum Dolor Sit Amet Lorem Ipsum Dolor Sit Amet Lorem Ipsum Dolor Sit Amet Lorem Ipsum Dolor Sit Amet Lorem Ipsum Dolor Sit Amet Lorem Ipsum Dolor Sit Amet Lorem Ipsum Dolor Sit Amet</td> 
 
    <td>Lorem Ipsum Dolor Sit Amet</td> 
 
    <td>Lorem Ipsum Dolor Sit Amet</td> 
 
    <td>Lorem Ipsum Dolor Sit Amet</td> 
 
    </tr> 
 
    <tr> 
 
    <td>Lorem Ipsum</td> 
 
    <td>Lorem Ipsum</td> 
 
    <td>Lorem Ipsum</td> 
 
    <td>Lorem Ipsum</td> 
 
    <td>Lorem Ipsum Lorem Ipsum Dolor Sit Amet Lorem Ipsum Dolor Sit Amet Lorem Ipsum Dolor Sit Amet Lorem Ipsum Dolor Sit Amet Lorem Ipsum Dolor Sit Amet Lorem Ipsum Dolor Sit Amet Lorem Ipsum Dolor Sit Amet Lorem Ipsum Dolor Sit Amet Lorem Ipsum Dolor Sit 
 
     Amet Lorem Ipsum Dolor Sit Amet Lorem Ipsum Dolor Sit Amet Lorem Ipsum Dolor Sit Amet Lorem Ipsum Dolor Sit Amet Lorem Ipsum Dolor Sit Amet Lorem Ipsum Dolor Sit Amet Lorem Ipsum Dolor Sit Amet Lorem Ipsum Dolor Sit Amet Lorem Ipsum Dolor Sit Amet 
 
     Lorem Ipsum Dolor Sit Amet Lorem Ipsum Dolor Sit Ametv</td> 
 
    </tr> 
 
</table>