在角度上旋转动画

Question

我希望使用CSS3 webkit旋转来旋转齿轮图像。我已经分别尝试了X，Y和Z的多个途径，以及2D和3D。任何帮助将不胜感激。 正如您所看到的那样，它正在旋转，但不会产生可以产生齿轮真实旋转的角度。

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

＆＃13;

＆＃13;

#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);
  }
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;