image - Rotating Animation on an Angle -

i wanting have gear image rotate using css3 webkit rotate. have tried multiple avenues of x, y , z individually , collectively, 2d , 3d. assistance appreciated. can see, rotating, not @ angle produce realistic rotation of gear.

http://jsfiddle.net/carincamen/3z90g2yr/

#gear07 {    position: absolute;    left: 40%;    margin-top: 30%;    width: 100px;    height: 100px;    background-image: url(http://s18.postimg.org/3uqlngkph/gear_lg.png);    transform: rotate(35deg);    z-index: 3;    -webkit-animation: gear07 2s infinite linear;    -moz-animation: gear07 2s infinite linear;    -o-animation: gear07 2s infinite linear;    -ms-animation: gear07 2s infinite linear;    animation: gear07 2s infinite linear;    -webkit-transform-origin: 50% 50%;    -moz-transform-origin: 50% 50%;    -o-transform-origin: 50% 50%;    transform-origin: 50% 50%;  }  @-webkit-keyframes gear07 {    0% {      -webkit-transform: rotate3d(0, 0, 1, 0deg);    }    100% {      -webkit-transform: rotate3d(0, 0, 1, 360deg);    }  }  @-moz-keyframes gear07 {    0% {      -moz-transform: rotate3d(0, 0, 1, 0deg);    }    100% {      -moz-transform: rotate3d(0, 0, 1, 360deg);    }  }  @-o-keyframes gear07 {    0% {      -o-transform: rotate3d(0, 0, 1, 0deg);    }    100% {      -o-transform: rotate3d(0, 0, 1, 360deg);    }  }  @-ms-keyframes gear07 {    0% {      -ms-transform: rotate(0, 0, 1, 0deg);    }    100% {      -ms-transform: rotate(0, 0, 1, 360deg);    }  }

<div id="gear07"></div>