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

Comments

Popular posts from this blog

Multi-host docker cluster using OVS/VxLAN on CentOS 7

Be aware! Docker is a trap.

CSS3-based animation instead of jQuery