Using CSS3 Transform

With CSS3 we can transform the appearance of elements by rotating, scaling, skewing or translating it. When adding transform css to an element it is applied before the page is rendered. Transformations can also be applied during transitions to create different animations.

In the examples below we transform the same image over and over:

CSS3 Transform Skew

With CSS3 we can skew our elements, this means we disort the element by a specified angle from the x-asis, y-asis or both. When skewing a square it becomes a parallelogram.

-moz-transform: skew(-25deg);
-webkit-transform: skew(-25deg);

Now we include the y-axis:

-moz-transform: skew(-25deg, 10deg);
-webkit-transform: skew(-25deg, 10deg);

CSS3 Transform Rotate

Besides skewing the element we can also rotate it. Similar to the skew syntax we pass as parameter the degree you want element to rotate in CSS3. As you can see the rotation of the image looks similar to the skewing from both the x-axis as the y-axis but yet there are some decisive differences.

-moz-transform: rotate(7deg);
-webkit-transform: rotate(7deg);

CSS3 Transform Scale

With CSS3 Scale you can scale elements on the fly. You don’t always know the height and with of an element but with scale you make the element smaller or larger. The CSS3 scale style is often used with transitions. As you can see in the examples the image which get larger or smaller don’t take up more or less space towards other elements as they did originally.

-moz-transform: scale(0.7);
-webkit-transform: scale(0.7);

Now with enlarging the image:

-moz-transform: scale(1.7);
-webkit-transform: scale(1.7);

CSS3 Translate

With CSS3 Translate we can move an element from its original position. We can move the element starting from the top and the left side.

-moz-transform: translate(70px, 30px);
-webkit-transform: translate(70px, 30px);