Rotating Animation on an Angle - image

Question

I am wanting to have a gear image rotate using CSS3 webkit rotate. I have tried multiple avenues of X, Y and Z individually and collectively, as well as 2D and 3D. Any assistance would be greatly appreciated.
As you can see, it is rotating, but not at the angle that would produce a realistic rotation of a 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>