CSS3 transformation with Rotating gears example

Introduction

Given a static image like this one

We might apply many kinds of transformations on it using CSS3 "transform" like rotate and scale, skew or any transformation matrix.

How to apply it ?

You can rotate gear by 120 degrees using the following css

.my_class {
-webkit-transform:rotate(120deg);
-moz-transform:rotate(120deg);
-ms-transform:rotate(120deg);
-o-transform:rotate(120deg);
transform:rotate(120deg);
}

You may scale to be 50% smaller using a similar sytax:

.my_class {
-webkit-transform:scale(0.5);
-moz-transform:scale(0.5);
-ms-transform:scale(0.5);
-o-transform:scale(0.5);
transform:scale(0.5);
}

you may also specify different factor for X-axis and Y-axis using scale(X,Y);
You may specify two transformations like this

.my_class {
-webkit-transform:rotate(120deg) scale(0.5);
-mox-transform:rotate(120deg) scale(0.5);
}

Here is an example

How to animating it ?

we can use "@-moz-keyframes" and "@-webkit-keyframes" we have learned in a previous post titled creating CSS3 animations using something like

@-moz-keyframes ani {
  0% { -moz-transform:rotate(0) scale(1);}
 50% { -moz-transform:rotate(180deg) scale(0.5); }
100% { -moz-transform:rotate(360deg) scale(1); }
}

and here is the result

Live Demo

You can see the above rotating gear in jsfiddle here