html - 如何在不破坏布局的 "flow"的情况下使用 css 旋转元素？

Question

左上框:这是原始表格。

中间框:这是我申请时发生的情况:

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

到红色元素。

右下框:这是我最终希望中间框的样子。如您所见，包含红色元素的表格通过将后者完全包含在其左上角元素中来正确处理后者，没有任何溢出。

我需要对中间框应用什么才能使其表现得像第三个框？

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

<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