css div tag movements

Hi friends let us discuss the css div tag movements

now a days css3 is used and also i wrote only mozilla firefox code and if u want i will tell u all the codes

i used a div tag named demo and when mouse over the div tag then it will provide movements

Html code:-

<div id="demo">
THIS IS TEST DEMO
</div>

css code:-
#demo{
cursor: default;
margin:0;
top:10%;
left:3%;
width:30%;
height:50%;border-radius: 5px;
  background: white;
  position: absolute;
   -moz-box-shadow:inset 0 3px 10px #000000;
   -webkit-box-shadow:inset 0 3px 10px #000000;
   box-shadow:inset 0 3px 10px #000000;

  -webkit-transition: all 0.7s ease;
  -moz-transition: all 1s ease;
}

#demo:hover{
margin:0;
top:20%;
left:30%;
width:30%;
height:50%;border-radius: 5px;
  background: white;
  position: absolute;
   -moz-box-shadow:inset 0 3px 10px #000000;
   -webkit-box-shadow:inset 0 3px 10px #000000;
   box-shadow:inset 0 3px 10px #000000;

  -webkit-transition: all 0.7s ease;
  -moz-transition: all 1s ease;
}

this will show the mouse action also
let you try and replay me
thank you