Spin Animation on Angle

Spin animation on an angle using CSS3

by Carin Camen

HTML

/*CSS3 can not create a spin on an axis angle. The image has to be flat to create a cog gear look.*/

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

<div id="gear08"></div>
<div id="gear09"></div>

CSS

#gear07 {
    position: absolute;
    left: 20%;
    margin-top: 15%;
    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);}
}

#gear08 {
    position: absolute;
    left: 50%;
    margin-top: 35%;
    width: 120px;
    height: 120px;
    background-image:             
        url(http://s23.postimg.org/hut8rsdgn/fl_Gear_XLg.png);
    transform: rotate(35deg);
    z-index: 3;

    -webkit-animation: gear08 9s infinite linear;
    -moz-animation: gear08 9s infinite linear;
    -o-animation: gear08 9s infinite linear;
    -ms-animation: gear08 9s infinite linear;
    animation: gear08 9s infinite linear;
    -webkit-transform-origin: 50% 50%;
    -moz-transform-origin: 50% 50%;
    -o-transform-origin: 50% 50%;
    transform-origin: 50% 50%;

}

@-webkit-keyframes gear08 {
    0% { -webkit-transform: rotate3d(0,0,1,0deg);}
    100% { -webkit-transform: rotate3d(0,0,1,360deg);}
}
@-moz-keyframes gear08 {
    0% { -moz-transform: rotate3d(0,0,1,0deg); }
    100% { -moz-transform:...