Question

好的，我想做的就是拿两排桌子，让它们一起凸出来。我发现这样做的最好方法是使用scale函数进行变换。问题是一行将在垂直轴上略微覆盖另一行。我希望顶行以某种方式被较低的行扩展或以某种方式将它们缩放在一起。通常情况下，你只需将它们包装在div中，但使用的tr不能很好地工作。

    <tr id="1">
        <td>
           Hello
        </td>
    </tr>
    <tr id="2">
       <td>
          Hello 2
       </td>
   </tr>    
    <style type="text/css">
        .grow{
            -webkit-backface-visibility: visible;
            -webkit-transition: 900ms ease;
            backface-visibility: visible;
            transition: 900ms ease;
            transform: scale(1.2, 1.2);
        } 
    </style>

    <script type="text/javascript">
        function flashAccommodation(){
            var row = document.getElementById("1");
            var row2 = document.getElementById("2");
            row.className = row2.className = "grow";
        }
    </script>

感谢val的回答，我的代码基于他的解决方案

.preGrow1{
    -webkit-backface-visibility: visible;
    -webkit-transition: 900ms ease;
    backface-visibility: visible;
    transition: 900ms ease;
    transform-origin: center bottom;
}
.preGrow2{
    -webkit-backface-visibility: visible;
    -webkit-transition: 900ms ease;
    backface-visibility: visible;
    transition: 900ms ease;
    transform-origin: center top;
}

  function flashAccommodation(id){
    var row = document.getElementById("1");
    var row2 = document.getElementById("2");
    row.className = "preGrow1";
    row2.className = "preGrow2";
    row.style.transform = row2.style.transform = "scale(1.2)";
}

Answer 1

您可能拥有的最佳选择是设置变换原点，以便缩放本身上下移动元素

在比例的情况下，变换原点是在变换过程中不移动的点。

因此，将其设置为第一行的底部会使其向上移动（将底线保持在相同位置）。与第二行相反。

td {
  background-color: lightblue;
}

tr {
  transition: transform 1s;  
}
table:hover tr {
  transform: scale(1.2);  

}

tr:first-child {
  transform-origin: center bottom;  

}

tr:last-child {
  transform-origin: center top;  

}

<table>   
<tr id="1">
        <td>
           Hello
        </td>
    </tr>
    <tr id="2">
       <td>
          Hello 2
       </td>
   </tr>
  </table>

使用Transform缩放多个元素

1 个答案: