HTML CSS examples for CSS Animation:Image
animate image shape into a trapezium
<html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style id="compiled-css" type="text/css"> img {<!--from ww w. j ava2s .c o m--> position: relative; width: 250px; height: 150px; text-align: center; border: 3px solid black; font-size: 200%; overflow: visible; } .skewed { transition: all 2s ease; -webkit-transition: all 2s ease; -moz-transition: all 2s ease; -ms-transition: all 2s ease; -o-transition: all 2s ease; } .skewed:hover { transform: perspective(500px) rotateY(45deg); -webkit-transform: perspective(500px) rotateY(45deg); -moz-transform: perspective(500px) rotateY(45deg); -ms-transform: perspective(500px) rotateY(45deg); -o-transform: perspective(500px) rotateY(45deg); } </style> </head> <body> <img src="https://www.java2s.com/style/demo/Safari.png"> <br> <img class="skewed" src="https://www.java2s.com/style/demo/Firefox.png"> </body> </html>