CSS3 Examples
7. CSS3 transition example.<!DOCTYPE html> <html> <head> <title>Untitled Document</title> <style> #box{ width:100px; height:100px; font-size:20px; background-color:#0CF; border-radius:5px; box-shadow:10px 10px 2px #999999; text-align:center; padding-top:20px; text-shadow:5px 5px 2px #666666; transition:width 2s, height 2s, transform 2s; -webkit-transition:width 2s, height 2s, left 2s, -webkit-transform 2s; position:relative; top:50px; left:100px; } #box:hover{ width:150px; height:150px; left:400px; transform:rotate(360deg); -webkit-transform:rotate(360deg); } </style> </head> <body> <div id="box"> Welcome to CSS3 </div> </body> </html>Output :
Welcome to CSS3
Developed by