html中设置盒子旋转后移动办,如何用css旋转元素而不破坏布局的“流动”？

左上框：这是原表。

中东盒：这是发生在我申请：

.rotate {

-webkit-transform: rotate(270deg);

-moz-transform: rotate(270deg);

-o-transform: rotate(270deg);

-ms-transform: rotate(270deg);

transform: rotate(270deg);

}

的红色元素。

底部右框：这是我最终想要的中间框看起来像。正如你所看到的，包含红色元素的表格通过在左上角的元素中完全包含后者来正确处理后者，而没有任何溢出。

我需要如何应用中间盒才能使其表现得像第三个一样？

很显然，我现在用一个很简单的例子来说明一个观点

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

}

+0

***适用于中间的方框，使其行为类似于第三***你是什么意思这样？你的意思是'盒子'是'桌子'吗？如果是这样，第三张桌子和中间桌子不一样，我不明白你在这里想要什么。 –

+0

@KingKing澄清。 –

+1

@KingKing：OP想要使用CSS旋转红色区域，并强制父级扩展其高度(以适应旋转宽度)。 –