使用“变换”缩放多个元素

Using Transform to scale multiple elements

本文关键字：元素 缩放 变换 使用      更新时间：2023-09-26

好的，所以我想做的是取一个表的两行，使它们一起凸起。我发现最好的方法是使用比例函数进行变换。问题是，在垂直轴上，一排会稍微覆盖另一排。我希望最上面的一排能以某种方式被下面的几排抬高，或者以某种方式将它们缩放在一起。通常情况下，您只需要将它们封装在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)";
}

可能最好的选择是设置变换原点，这样缩放本身就可以在上下移动元素

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

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

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>

相关文章：