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>