CSS3 Examples
12. CSS3 Animation example 3.<!DOCTYPE html> <html> <head> <title>Untitled Document</title> <style> @keyframes anim1 { from{ background-color:#0CF; transform:rotateX(0deg);} to { background-color:#F0F; transform:rotateX(360deg);} } @-webkit-keyframes anim1 { from{ background-color:#0CF; -webkit-transform:rotateX(0deg);} to { background-color:#F0F; -webkit-transform:rotateX(360deg);} } #box{ width:100px; height:100px; font-size:26px; background-color:#0CF; border-radius:5px; box-shadow:10px 10px 2px #999999; text-align:center; padding-top:20px; text-shadow:5px 5px 2px #666666; position:absolute; top:200px; left:500px; } #box:hover{ animation:anim1 5s; -webkit-animation:anim1 5s; } </style> </head> <body> <div id="box"> <img src="images/anjelina.jpg" width="100"> </div> </body> </html>Output :(Mouse over the image)
Developed by