Create playing drums by css3 animation - css

Question

I want to create a animation for a man playing drums(Dhol). So I cannot understand how to rotate hand end only on drum. Please see my Fiddle here
My html:
<div class="man_body"></div>
<div class="man_hand"></div>
<div class="man_shadow"></div>
My css:
.man_body {
position:absolute;
height:225px;
width: 137px;
background-image:url('http://i60.tinypic.com/2ag7uwk.png');
z-index:1;
}
.man_hand {
width:37px;
height:96px;
background-image:url('http://i61.tinypic.com/2ntfmdh.png');
position:absolute;
z-index:2;
left:30px;
top:65px;
-webkit-animation-name: man_hand-rotate;
-webkit-animation-duration: .5s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear; /* Just another timing function */
-webkit-animation-direction: alternate; /* Lets do in alternate fashion */
}
#-webkit-keyframes man_hand-rotate {
from{-webkit-transform:rotate(0deg);}
to{-webkit-transform:rotate(50deg);}
}

Answer 1

You would need to adjust the transform-origin point about which the rotation occurs. By default this is the center point of the element.
I've appoximated at:
transform-origin:center top;
but you can adjust this to suit.
Note: I've adjusted the position of the 'arm` slightly and set the rotattion to 15deg on both keyframes (as these were different in your original code).
.drumer {
position: absolute;
width: 100%;
height: 350px;
overflow: hidden;
}
.man_body {
position: absolute;
height: 225px;
width: 137px;
background-image: url('http://i60.tinypic.com/2ag7uwk.png');
z-index: 1;
}
.man_hand {
width: 37px;
height: 96px;
background-image: url('http://i61.tinypic.com/2ntfmdh.png');
position: absolute;
z-index: 2;
left: 33px;
top: 65px;
transform-origin: center top;
-webkit-animation-name: man_hand-rotate;
-webkit-animation-duration: .5s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
/* Just another timing function */
-webkit-animation-direction: alternate;
/* Lets do in alternate fashion */
}
/* Chrome / Safari */
#-webkit-keyframes man_hand-rotate {
from {
-webkit-transform: rotate(0deg);
}
to {
-webkit-transform: rotate(15deg);
}
}
/* Old Firefox */
#-moz-keyframes man_hand-rotate {
from {
-moz-transform: rotate(0deg);
}
to {
-moz-transform: rotate(15deg);
}
}
/* new Firefox & supporting broswers */
#keyframes man_hand-rotate {
from {
transform: rotate(0deg);
}
to {
transform: rotate(15deg);
}
}
.man_shadow {
background: none repeat scroll 0 0 rgba(0, 0, 0, 0);
top: 227px;
box-shadow: -5px 10px 45px 2px #000000;
left: 7px;
position: absolute;
width: 136px;
}
<div class="man_body"></div>
<div class="man_hand"></div>
<div class="man_shadow"></div>