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

我認爲計算px屬性值transform-origin像下面應該解決這個問題。

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>