如何在不破坏布局"流量"的情况下使用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;
}

演示