How To Transform Elements Using CSS

Syntax: transform:list of transform-functions | none

Where transform-function includes functions used for re-sizing, skewing, rotating and translating elements.

How To Resize Elements Using CSS

You can resize HTML elements using scale function in transform property of CSS. The transformation function scale(number, number) scales the object by the scale values specified. Where 1 is the same scale of the object and numbers less than one scale the objects smaller and grater than one larger. If the second value for Y scale is omitted, it is assumed to be the same as the first. Other functions used for re-sizing elements are as follows.

Examples:

#transformXY{
 -moz-transform:scale(1.2, 1.9);
 -webkit-transform:scale(1.2, 1.9);}
#transformX{
 -moz-transform:scaleX(0.5);
 -webkit-transform:scaleX(0.5);}
#transformY{
 -moz-transform:scaleY(1.5);
 -webkit-transform:scaleY(1.5);}
#transformZ{
 -moz-transform:scaleZ(2.5);
 -webkit-transform:scaleZ(2.5);}
#transformXYZ{
 -moz-transform:scale3d(0.5,1.5,2.5);
 -webkit-transform:scale3d(0.5,1.5,2.5);}

Demo:

How To Skew Elements Using CSS

You can change the shape of HTML elements using skew function in transform property of CSS. The transformation function skew(angle, angle) skews the element along the X and Y axes by the specified angle values. The second value may be missing and assumed to be 0. Other functions used for skewing elements are as follows.

Examples:

#transformXY{
    -moz-transform:skew(120deg, 45deg);
    -webkit-transform:skew(120deg, 45deg);}
#transformX{
    -moz-transform:skewX(45deg);
    -webkit-transform:skewX(45deg);}
#transformY{
    -moz-transform:skewY(45deg);
    -webkit-transform:skewY(45deg);}

Demo:

How To Rotate Elements Using CSS

Using rotate(angle) function in transform property, you can rotate elements by specified angle. similarly, rotateX(angle), rotateY(angle) and rotateZ(angle) rotates elements around X, Y and Z axis respectively.

Examples:

#transform{
    -moz-transform:rotate(40deg);
    -webkit-transform:rotate(40deg);}
#transformX{
    -moz-transform:rotateX(40deg);
    -webkit-transform:rotateX(40deg);}
#transformY{
    -moz-transform:rotateY(40deg);
    -webkit-transform:rotateY(40deg);}
#transformZ{
    -moz-transform:rotateZ(40deg);
    -webkit-transform:rotateZ(40deg);}

Demo:

How To Translate Elements Using CSS

The transformation function translate(translation-value-x, translation-value-y) specifies a translation by the vector translation-value-x, translation-value-y. The translation-value-y is optional and be 0 if not specified. Other functions used for translating elements are as follows.

Examples:

#transformXY{
    -moz-transform:translate(20%,30%);
    -webkit-transform:translate(20%,30%);
    }
#transformX{
    -moz-transform:translateX(50px);
    -webkit-transform:translateX(50px);
    }
#transformY{
    -moz-transform:translateY(30px);
    -webkit-transform:translateY(30px);
    }
#transformZ{
    -moz-transform:translateZ(50px);
    -webkit-transform:translateZ(50px);
    }
#transformXYZ{
    -moz-transform:translate3d(20px,20px,20px);
    -webkit-transform:translate3d(20px,20px,20px);
    }

Demo:

How To Set Elements Transform Origin

There is a property transform-origin, which is used to establish the point of origin when applying a transformation on an element. The first value of this property will be either a percentage, a CSS length or a keyword specifying the horizontal position and the second value specifies the vertical position. If a single value is set, it is assumed to be horizontal and the vertical value is set to 50%. The syntax and Examples for this property are as follows.

Syntax:

Example:

#image{
-moz-transform:skewX(55deg);

-moz-transform-origin:0% 0%;
-webkit-transform:skewX(55deg);
-webkit-transform-origin:0% 0%;}

How To Change Elements Transform Style

You can change elements transform style with property transform-style, which is used to define how nested items are rendered in a 3-D space, the choice being either flattened or with their dimensions preserved. This property affects the children or the element and not the element itself.

Syntax: transform-style: flat | preserve-3d

Example:

div {
-webkit-transform:rotateY(55deg);
-webkit-transform-style:preserve-3d;
}

Read Next:How to Create Animation Using CSS