Ad

Using Transform To Scale Multiple Elements

Ok so what I want to do is take two rows of a table and make them bulge out together. The best way I have found to do this is with transform using the scale function. The problem is that one row will cover the other slightly on the verticle axis. I would like the top row to somehow be bumped up by the lower rows expansion or scale them together somehow. Normally you would just wrap them in a div but with a tr that doesn't work so well.

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

Thanks to vals for his answer my code below works based on his solution

.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)";
}
Ad

Answer

Probably the best option that you have is to set the transform origin so that the zoom itself moves the elements up and down

The transform origin, in the case of a scale, is the point that doesn't move in the transform process.

So, setting it to bottom for the first row makes it move upwards (keeping the bottom line at the same position). And the opposite for the second row.

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>

Ad
source: stackoverflow.com
Ad