如何在不破坏布局“流量”的情况下使用css旋转元素？

Question

左上方框：这是原始表格。

中间框：这是我申请时会发生的事情：

.rotate {
  -webkit-transform: rotate(270deg);
  -moz-transform: rotate(270deg);
  -o-transform: rotate(270deg);
  -ms-transform: rotate(270deg);
  transform: rotate(270deg);
}

到红色元素。

右下方框：这是我最终希望中间框看起来像的样子。正如您所看到的，包含red元素的表通过在其左上角元素中完全包含后者而没有任何溢出来正确地处理后者。

我需要应用于中间框以使其表现得像第三个？

显然我使用一个非常简单的例子来说明一点

<div>
<table id='one'>
    <tr>
        <td>
            <div class='red'></div>
        </td>
        <td>
        </td>
    </tr>
    <tr>
        <td><div class="blue"></div></td>
        <td><div class="blue"></div></td>
    </tr>
</table>
</div>

<div>
<table id='two'>
    <tr>
        <td>
            <div class='red rotate'></div>
        </td>
        <td>
        </td>
    </tr>
    <tr>
        <td><div class="blue"></div></td>
        <td><div class="blue"></div></td>
    </tr>
</table>
</div>

<div>
<table id='three'>
    <tr>
        <td>
            <div class='red'></div>
        </td>
        <td>
        </td>
    </tr>
    <tr>
        <td><div class="blue"></div></td>
        <td><div class="blue"></div></td>
    </tr>
</table>
</div>

CSS：

table, th, td { 
    border: 1px solid black;
}

#two { 
    margin-top:20px;
    margin-left:350px;
}

#three { 
    margin-top:20px;
    margin-left:700px;
}

.red { 
    width: 150px;
    height: 50px;
    background-color:red;
}

#three .red { 
    width: 50px;
    height: 150px;
    background-color:red;
}

.blue { 
    width: 100px;
    height:100px;
    background-color: blue;
}

.rotate {
  -webkit-transform: rotate(270deg);
  -moz-transform: rotate(270deg);
  -o-transform: rotate(270deg);
  -ms-transform: rotate(270deg);
  transform: rotate(270deg);
}

Answer 1

由于您要设置.red的初始宽度和高度，因此您可以在旋转时简单地交换这些属性。

替换它：

.rotate {
  -webkit-transform: rotate(270deg);
  -moz-transform: rotate(270deg);
  -o-transform: rotate(270deg);
  -ms-transform: rotate(270deg);
  transform: rotate(270deg);
}

有了这个：

.rotate {
  width: 50px;
  height: 150px;
}

Demo