0

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>
jbutler483
  • 24,074
  • 9
  • 92
  • 145
Carin Camen
  • 1
  • 1
  • 4
  • 1
    That image is at an angle, so you won't be able to achieve a nice animation with it. – jbutler483 Apr 14 '15 at 15:47
  • So CSS3 image rotate has to be flat? Would I be able to do this with Jquery? – Carin Camen Apr 14 '15 at 15:50
  • [This](http://stackoverflow.com/questions/28693659/how-to-make-a-smooth-dashed-border-rotation-animation-like-marching-ants) might give you some ideas of a cog – jbutler483 Apr 14 '15 at 15:55
  • I appreciate your comments. I had looked at the cog tutorials, but was wanting more of a 3d affect spinning at an angle instead of flat. Looks like I am asking CSS3 to do "magic". – Carin Camen Apr 14 '15 at 17:10
  • You're not asking magic, just a complex animation. Look up "gears" on codepen.io -you'll see how complex it can get! Start with something smaller would 've my advice – jbutler483 Apr 14 '15 at 17:15

0 Answers0