<!DOCTYPE html> <html> <head> <title>CSS3 Transitions - Transform Rotate</title> </head> <body> <style type="text/css"> .transition_transformation{ width: 100px; height: 100px; background:#0099da; margin:50px; border-radius:4px; -webkit-transition: width 2s, height 2s, -webkit-transform 2s; /* Safari */ transition: width 2s, height 2s, transform 2s; } .transition_transformation:hover { width: 200px; height: 200px; -webkit-transform: rotate(180deg); /* Safari */ transform: rotate(180deg); } </style> <div class="transition_transformation"></div> </body> </html>
Output :
Topic :
Transform Rotate
