Using CSS to cause an image to "expand" when hovered over

I just stumbled across some interesting code written by one of my co-workers that utilizes CSS to cause an image to expand slightly when the user of the web page hovers over it.  As you might guess, this would be perfect for highlighting clickable components such as buttons and the like.  This idea was so clever that I thought I'd share:

<style>
        .imgButton {
          display: inline-block;
          vertical-align: middle;
          -webkit-transform: perspective(1px) translateZ(0);
          transform: perspective(1px) translateZ(0);
          box-shadow: 0 0 1px transparent;
          -webkit-transition-duration: 0.3s;
          transition-duration: 0.3s;
          -webkit-transition-property: transform;
          transition-property: transform;
        }
        .imgButton:hover, .imgButton:active, .imgButton:focus {
          -webkit-transform: scale(1.1);
          transform: scale(1.1);
        }

</style>

...

<img src="pathToImageFile" class="imgButton" />