CSS3 TRANSFORMS AND TRANSITIONS

2-D TRANSFORM

2D transforms are used to perform different effects on the coordinate system of an element with respect to the 2 axis, x and y. These functionalities help us to change the shape, size, position and orientation of an element.

The 2-dimensional coordinate system is given as:

Syntax:

transform: name_of_property(value);

To make transform work in all the browsers, we need to add the cross-browser libraries to it. For that, we write them as:

-webkit- transform: name_of_property(value); for chrome and safari

-o- transform: name_of_property(value); for opera

-moz- transform: name_of_property(value); for mozilla firefox

-ms- transform: name_of_property(value); for internet explorer

1. Translate- This property is used to move the position of the element with respect to its current position. A positive value shifts the element in the positive direction of the axes and a negative value shifts the element in the negative direction of the axes.

Writing "transform: translate(x-value, y-value)" shifts the element in the x direction by the x-value amount and in the y direction by the y-value amount. Also, we can use the translate property to shift the element in a single direction also. For that, we use             

             transform: translateX(value); or transform: translateY(value);

2.    Scale- This property is used to change the size of the element with respect to its current size. A positive value increases the size and a negative value decreases the size.

Writing "transform: scale(x-value, y-value)" changes the width of the element by x-value and the height of the element by y-value. Also, we can use the scale property to change the size of the element with respect to only a single coordinate.

For that, we use

            transform: scaleX(value); or transform: scaleY(value);

3.  Rotate- This property is used to change the orientation of the element with respect to its orientation. A positive value rotates the element in a clockwise direction and a negative value rotates the element in the anti-clockwise direction.

Writing "transform: rotate (value deg)"rotates the element with the value degree.

4. Skew- This property is used to turn the element's edges with respect to its current position.

Writing "transform: skew(x-value, y-value)" turns the element by x-value in the x direction and by y-value in the y direction. Also, we can use the skew property to turn the element with respect to only a single coordinate.

For that, we use

transform: skewX(value); or transform: skewY(value);

5.    Matrix- This property is used to apply all the transforms in a single property. It consists of 6 values which cover all the transforms.

Writing "transform: matrix (6 values)" applies all the transforms together according to the 6 values provided.

3-D TRANSFORM

3D transforms are similar to 2D transforms, only the difference lies in the coordinates. 2D transform works on a 2 dimensional coordinate system and 3D transforms work on a 3 dimensional coordinates, with an extra z-coordinate.

The 3-dimensional coordinate system is given as:

Syntax:

transform: name_of_property3d(value);

To make transform work in all the browsers, we need to add the cross-browser libraries to it. For that, we write them as:

-webkit- transform: name_of_property3d(value); for chrome and safari

-o- transform: name_of_property3d(value); for opera

-moz- transform: name_of_property3d(value); for mozilla firefox

-ms- transform: name_of_property3d(value); for internet explorer

1.    Translate- This property is used to move the position of the element with respect to its current position in all the three axes.

Writing "transform: translate3d (x-value, y-value, z-value)" shifts the element in the x direction by the x-value amount, in the y direction by the y-value amount and in the z direction by the z-value amount.

For single z-direction, we use

            transform: translateZ(value);

2.    Scale- This property is used to change the size of the element with respect to its current size in all the three axes.

Writing "transform: scale3d(x-value, y-value, z-value)" changes the width of the element by x-value, the height of the element by y-value and depth of the element by the z-value.

For single z-direction, we use

            transform: scaleZ(value);

3.    Matrix- This property is used to apply all the transforms in a single property. It consists of 16 values (4X4 matrix) which cover all the transforms.

Writing "transform: matrix3d (16 values)" applies all the transforms together according to the 16 values provided.

4.    Perspective- This property specifies a projection matrix which will scale the points in the x and y coordinates based on the value of the z coordinate. This is used to provide a realistic appearance to the element. At z=0, the size of the element remains unchanged. A positive value of z indicates moving away from the origin and a negative value of z represents moving towards the origin. This is used as:

            transform: perspective(z-value);

TRANSITION

Transitions are used to provide smooth effects in the different states of transforms.

Syntax:

transition: transition_property transition_duration transition_delay transition_timing_function;

Transition property is the name of the transform property on which the transition is to be applied.

Transition_duration is the time interval during which the change of state should take place.

Transition_delay is the time interval for which the transition waits before the process starts.

Transition_timing_function is used to describe the speed of the transition.

To make transition work in all the browsers, we need to add the cross-browser libraries to it. For that, we write them as:

For browsers like Chrome, and Safari

-webkit- transition: transition_property transition_duration transition_delay transition_timing_function;

For Mozilla Firefox

-moz- transition: transition_property transition_duration transition_delay transition_timing_function;

For browser Opera

-o- transition: transition_property transition_duration transition_delay transition_timing_function;

For Internet Explorer

-ms- transition: transition_property transition_duration transition_delay transition_timing_function;

---------------------------------------------------------------------------------------------------------------

For more information:
Admec Multimedia Institute
www.admecindia.co.in
Mob.: 99 1178 2350, 99 9949 2155
E-mail: info@admecindia.co.in