How To Transform Elements Using CSS

There is a property in CSS called transform property which can transform HTML elements in different ways like re-sizing elements, changing the shape of elements, rotating elements in certain angle and translating elements from one location to another location. For all of the above transformations there are functions scale(number, number), skew(angle, angle), rotate(angle) and translate(translation-value-x, translation-value-y) to use as the value of transform property. In this post I am describing the uses of transform property and different transformation functions used in transformation property.

Syntax: transform:list of transform-functions | none

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

Table of Contents

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.

scaleX(number)	Scales the object only on the X axis keeping Y the same.
scaleY(number)	Scales the object only on the Y axis keeping X the same.
scaleZ(number)	Scales the object only on the Z axis to make 3-D shape.
scale3d(number, number, number)	Same as scale(number, number) with adding parameter on Z axis.

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:

See the Pen How To Resize Elements Using CSS by Shuseel Baral (@shuseel) on CodePen.

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.

skewX(angle)	Skews the element only on the X axis by the specified angle.
skewY(angle)	Skews the element only on the Y axis by the specified angle.

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:

See the Pen How To Skew Elements Using CSS by Shuseel Baral (@shuseel) on CodePen.

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:

See the Pen How To Rotate Elements Using CSS by Shuseel Baral (@shuseel) on CodePen.

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.

translateX(translation-value)	Specifies a translation by translation value in the X direction.
translateY(translation-value)	Specifies a translation by translation value in the Y direction.
translateZ(translation-value)	Specifies a translation by translation value in the Z direction.
translate3d(translation-value-x, translation-value-y, translation-value-Z)	Same as translate(translation-value-x, translation-value-y) with adding parameter on Z axis.

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:

See the Pen How To Translate Elements Using CSS by Shuseel Baral (@shuseel) on CodePen.

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:

transform-origin: percentage | length | left | center | right [percentage | length | top | center | bottom]

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.