Create playing drums by css3 animation

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>