CSS Rotate

by Art Dahm

HTML

<div class="demo">
     <h2>CSS3 Animation</h2>

    <div class="dragongears">
        <div class="gearbox">
            <img class="big" src="http://dragongears.com/gear-large.png" />
            <img class="small" src="http://dragongears.com/gear-small.png" />
        </div>
    </div>
     <h2>Animated GIF</h2>

    <img src="http://dragongears.com/wp/wp-content/themes/dragongears/style/img/gears_anim_48_faster.gif" />
</div>

CSS

.demo {
    position: relative;
    display: inline-block;
    margin: 50px;
    padding: 20px;
    background-color: orange;
}
.dragongears {
    position: relative;
    background-image: url(http://dragongears.com/wp/wp-content/themes/dragongears/style/img/drag_ngears.png);
    width:520px;
    height:53px;
}
.dragongears .gearbox {
    position: absolute;
    left: 140px;
    top:12px;
    display:inline-block;
    width: 40px;
    height: 40px;
}
.dragongears .big {
    width: 100%;
    height: 100%;
    animation: rotatebig 18.2s infinite linear;
}
@keyframes rotatebig {
    100% {
        transform: rotate(-360deg);
    }
}
.dragongears .small {
    position: absolute;
    left: 29px;
    top: -12px;
    width: 23px;
    height: 23px;
    animation: rotatesmall 8.4s infinite linear;
}
@keyframes rotatesmall {
    100% {
        transform: rotate(360deg);
    }
}
h2 {
    font-family: sans-serif;
}