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

Posted 2023-03-05

【中文标题】如何在不破坏布局“流程”的情况下使用 css 旋转元素？

【英文标题】：How can I rotate an element with css without breaking the "flow" of the layout?

【发布时间】：2014-06-26 10:28:26

【问题描述】：

左上框：这是原始表格。

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

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

【问题讨论】：

应用到中间框，使其表现得像第三个你这是什么意思？你的意思是boxas table？如果是这样，第三张桌子和中间一张不同，我不明白你在这里真正想要什么。

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

@DavidThomas 谢谢，我对 OP 的 html 代码感到困惑。如果是这样，他应该只为 1 个表添加代码。不需要更多的 2 张桌子。

看起来很难做到漂亮就像你可以在WPF中做的LayoutTransform，CSS中的变换是某种 WPF中的RenderTransform，不影响布局（当然除了子级会受到父级的transform影响）。因此，您只能尝试在旋转内部 div 以调整布局时更改 td 的 CSS，为此，您应该为 td 添加类 rotate，而不是为内部 div 添加类。这是我尝试过的演示 jsfiddle.net/ZUW3k 这很有可能不是您实际上想要的。

【参考方案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

【讨论】：

你真的错过了问题的重点吗？这是关于在不中断流程的情况下旋转元素，而不是调整矩形的大小。 OP说明了这一点：这是一个简单的例子，可以说明这一点。很难相信你是真诚地错过了它。