Sunny Books
What we have

CSS3 2D transforms

A transform is an effect that lets an element change shape, size and position.CSS3 transform let us move, scale, turn, spin, and stretch elements. there are six transform methods: translate, rotate, scale, skew, matrix.

Translate() method

The translate() method moves the elements from its current position to the new position. The new position is defined with the parameters of X-axis and Y-axis.For example, the value translate(50px,100px) moves the element 50 pixels from the left, and 100 pixels from the top.

Rotate() method

The rotate() method rotates the element clockwise at a given degree. Negative values are allowed and rotates the element counter-clockwise. For example, the value rotate(30deg) rotates the element clockwise 30 degrees.

Scale() method

The scale() method increases or decreases the size of the element, depending on the parameters given for the width (X-axis) and the height (Y-axis). For example, the value scale(2,4) transforms the width to be twice its original size, and the height 4 times its original size.

Skew() method

The skew() method turns the element in a given angle, depending on the parameters given for the horizontal (X-axis) and the vertical (Y-axis) lines. For example, the value skew(30deg,20deg) turns the element 30 degrees around the X-axis, and 20 degrees around the Y-axis.

Matrix() method

The matrix() method combines all of the 2D transform methods into one.

The matrix method take six parameters, containing mathematic functions, which allows you to: rotate, scale, move (translate), and skew elements.

Examples (hover on the box or image)

div[box1]:hover {
-ms-transform: translate(50px,100px);
-webkit-transform: translate(50px,100px);
-o-transform: translate(50px,50px);
transform: translate(50px,50px);}

div[box2]:hover {
-ms-transform: rotate(60deg);
-webkit-transform: rotate(60deg);
-o-transform: rotate(60deg);
transform: rotate(60deg);}

div[box3]:hover {
-ms-transform: scale(2,4);
-webkit-transform: scale(2,4);
-o-transform: scale(2,4);
transform: scale(2,4);}

div[box4]:hover {
-ms-transform: skew(30deg,20deg);
-webkit-transform: skew(30deg,20deg);
-o-transform: skew(30deg,20deg);
transform: skew(30deg,20deg);}

Rotate 30 degrees using matrix() method
div[box5]:hover {
-ms-transform: matrix(0.866,0.5,-0.5,0.866,0,0);
-webkit-transform: :matrix(0.866,0.5,-0.5,0.866,0,0);
-o-transform: matrix(0.866,0.5,-0.5,0.866,0,0);
transform: matrix(0.866,0.5,-0.5,0.866,0,0);}

Flower spins and scale
div[box6]:hover {
-ms-transform: rotate(360deg) scale(2,2);
-webkit-transform: rotate(360deg) scale(2,2);
-o-transform: rotate(360deg) scale(2,2);
transform: rotate(360deg) scale(2,2);}