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 ：

＆＃13;

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

希望这有帮助！ ：）

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>