css3 - Image scale transform jumps (chrome blink engine only) -
please move cursor center of image whitespace , back. image jumps max scale without animation.
.wrapper { margin : 120px; } .wrapper img { display : block; width : 400px; -webkit-transition: -webkit-transform 300ms linear; -moz-transition: -moz-transform 300ms linear; -ms-transition: -ms-transform 300ms linear; -o-transition: -o-transform 300ms linear; transition: transform 300ms linear; -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; -ms-backface-visibility: hidden; -o-backface-visibility: hidden; backface-visibility: hidden; } .wrapper img:hover { -webkit-transform: scale(1.5); -moz-transform: scale(1.5); -ms-transform: scale(1.5); -o-transform: scale(1.5); transform: scale(1.5); }
<div class="wrapper"> <img src="http://retriever-club.org/wp-content/uploads/2013/01/vospitanie-shhenka_2.jpg" /> </div>
Comments
Post a Comment