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

Question

enter image description here

左上框：这是原始表格。

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

.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

我能找到的最干净的解决方案是，每当 .rotate 类添加到子元素时，使用 :has 选择器来修改父 td。这与 display:absolute 和设置 top 和 right 属性相结合可以实现您想要的效果。您可能希望将 right 设置为 50px（div 的高度），将 top 设置为 0，但我发现您必须为每个添加 1px 才能使其看起来正确。如果我错了，有人会纠正我，但我相信这个额外的 1px 来自 div 在旋转之前与其父级的 1px 边框宽度交互的方式。这是工作代码：

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 {
  position: absolute;
  top: 51px;
  right: 1px;
  
  -webkit-transform: rotate(270deg);
  -moz-transform: rotate(270deg);
  -o-transform: rotate(270deg);
  -ms-transform: rotate(270deg);
  transform: rotate(270deg);
}

td:has(.rotate) {
    height: 150px;
    position: relative;
}

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

Answer 2

如果您想将多个元素作为一个旋转，请将它们放入旋转容器中，然后旋转容器，如下所示：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
</head>
<body>
<style>
    body {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100vh;
        margin: 0;
        font-family: Arial, sans-serif;
    }
    #rotate-container {
        display: flex;
        justify-content: space-around;
        align-items: center;
        width: 300px;
        height: 100px;
    }
    .element {
        width: 80px;
        height: 80px;
        background-color: lightblue;
        display: flex;
        justify-content: center;
        align-items: center;
        text-align: center;
        border-radius: 10px;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    }
</style>

<div id="rotate-container">
    <div class="element" id="element1">Element 1</div>
    <div class="element" id="element2">Element 2</div>
    <div class="element" id="element3">Element 3</div>
</div>

<script>
    rotateElements(90);
    function rotateElements(degrees) {
        var container = document.getElementById('rotate-container');
        container.style.transform = 'rotate('+degrees+'deg)';
    }
</script>
</body>
</html>

Answer 3

由于您正在设置

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

演示

Answer 4

尝试将显示更改为绝对，以便将其从文档流中取出。然后，您可以在其后面添加另一个不可见的元素，以便该元素仍有空间。

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

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

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

问题描述投票：0回答：4

4个回答

最新问题

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

问题描述 投票：0回答：4

4个回答

最新问题

问题描述投票：0回答：4