<div style="width: 50mm; height: 30mm; background: #cce;">1</div>
<div style="width: 100mm; height: 70mm; background: #cca;">2</div>
<div style="width: 30mm; height: 30mm; background: #aca;">3</div>

body{
  background: no-repeat radial-gradient( ellipse 150% 80% at right, #113 0, #113 10%, #558 100% );
  overflow-x: hidden;
  color: white;
  min-height: 100vh;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
div{
  margin: 5mm;
  transition: 0.3s;
}
div:hover{
  transform: scale( calc( ( var(--width) + 8 ) / var(--width) ), calc( ( var(--height) + 8 ) / var(--height) ) );
}

document.querySelectorAll( 'div' ).forEach( d => {
  d.style = ('' + d.getAttribute('style') ).replace( /(width|height)\:\s*(\d+)mm;\s*/g, '$& --$1: $2; ' );
} );