Wednesday, April 9, 2014

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

No comments:

Post a Comment