使用 Transform 缩放多个元素

Question

好的，所以我想做的是取两行 table 并使它们一起凸出。我发现执行此操作的最佳方法是使用 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>

感谢 vals 的回答我下面的代码基于他的解决方案

.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 缩放多个元素

Using Transform to scale multiple elements

html

javascript

css

css-transitions

css-transforms