Search within TutorialsPark

CSS3 2D Transform


Use CSS3 2D Transform function to move, rotate, scale and skew elements.


CSS3 2D Transform

burger
Translate along X axis (translateX(0)):
Translate along Y axis (translateY(0)):
Rotate along X axis (rotateX(0)):
Rotate along Y axis (rotateY(0)):
Skew along X axis (SkewX(0))
Skew along Y axis (SkewY(0))
Scale along X axis(ScaleX(0))
Scale along Y axis(ScaleY(0))

1. With CSS3 2D Transform you can position, rotate , skew and scale elements in 2D space

2. 2D Tranform properties are applied with the center of the element as the point of origin. However the orgin can be changed using CSS property of transform-origin to any desired point

3. Transformation properties causes the elements to be displayed with the desired transform, but this has no bearing on the original position of the element in the document flow.


Tables: CSS 2D Transform Properties

Property Description Initial Value
trasform Specifies the transform function to be applied to elements none
transform-origin Specifies the origin along which the transform function should be applied 50% 50%

Tables: CSS 2D Transform functions

Property Description
translate() Moves the element along X or Y axis based on two comma seperated values(in length units or percent)
translateX() Moves the element along the X axis by the specified length or percentage
translateY() Moves the element along the Y axis by the specified length or percentage
rotate() Rotates the element along its anchor point by the specified angle.
ScaleX() Scales the element along its X axis by specified scaling factor.
ScaleY() Scales the element along its Y axis by specified scaling factor.
scale() Scales the element along both its X and Y axis by specified scaling factor.
skewX() Skews the element along its X axis by the specified angle
skewY() Skews the element along its Y axis by the specified angle
matrix() Applies 2D trasform on the element using a matrix with 6 values

CSS3 2D Transform: translateX()

whitehouse Hover to See Effects

1.You can translate elements along the x-axis(both positive and negative) using CSS3 transform function translateX(). Values can be specified using length or percent.

2.The position of surrounding element remains unaffected.

CSS Example : 2D Transform translateX() function

Give it a TRY! » Exercise: Try for as many positive ,negative or decimal values


CSS3 2D Transform: translateY()

whitehouse Hover to See Effects

1.You can translate elements along the y-axis(both positive and negative) using CSS3 transform function translateY(). Values can be specified using length or percent.

Example: CSS linear-gradient() horizontal direction

Give it a TRY! » Exercise: Try for as many positive ,negative or decimal values


CSS3 2D Transform: translate()

whitehouse Hover to See Effects

1.To translate elements along the both X-axis and Y-axis at once use CSS3 transform function translateX(). Values can be specified using length or percent.

Example: CSS translate() along a diagonal

Give it a TRY! » Exercise: Try for as many positive ,negative or decimal values


CSS3 2D Transform: rotate()

whitehouse Hover to See Effects

1.You can rotate elements in the 2D plane around its center point using CSS3 transform function rotate(). Angles can be specified in degree, gradians, radians or turns.

Example: CSS rotate at an angle

Give it a TRY! » Exercise: Try for as many positive or negative values


CSS3 2D Transform: scaleX()

whitehouse Hover to See Effects

1.Elements can be displayed as larger or smaller along the X axis using CSS3 transform function scaleX() function. Values specifies the scaling factor to be applied. It can positive, negative and even decimal.

Example: CSS scaleX()

Give it a TRY! » Exercise: Try for as many positive, negative or decimal values


CSS3 2D Transform: scaleY()

whitehouse Hover to See Effects

1.Elements can be displayed as larger or smaller along the Y axis using CSS3 transform function scaleY(). Values specifies the scaling factor to be applied. It can positive, negative and even decimal.

Example: CSS 2D tranform scaleY() simple

Give it a TRY! » Exercise: Try for as many positive, negative or decimal values


CSS3 2D Transform: scale()

whitehouse Hover to See Effects

1.Elements can be displayed as larger or smaller along both the X and Y axis using CSS3 transform function scale() function. Values specifies the scaling factor to be applied. It can positive, negative and even decimal.

Example: CSS 2D transform scale() function

Give it a TRY! » Exercise: Try for as many positive, negative or decimal values


CSS3 2D Transform: skewX()

whitehouse Hover to See Effects

1.To alter the angle of the horizontal axis(X axis) of the element use CSS 2D transform function skewX() function. Angles can be specified in degree, gradians, radians or turns

Example: CSS 2D transform skewX()

Give it a TRY! » Exercise: Try for as many positive or negative values


CSS3 2D Transform: skewY()

whitehouse Hover to See Effects

1.To alter the angle of the vertical Axis (Y axis) of the element use CSS 2D transform function skewY() function. Angles can be specified in degree, gradians, radians or turns

Example: CSS skewY()

Give it a TRY! » Exercise: Try for as many positive or negative values


CSS3 2D Transform: skew()

whitehouse Hover to See Effects

1.To alter the angle of both the horizontal axis(X axis) and Vertical axis(Y axis) of the element use CSS 2D transform function skew() function. Angles can be specified in degree, gradians, radians or turns

Example: CSS 2D transform skew()

Give it a TRY! » Exercise: Try for as many positive and negative values


CSS3 2D Transform: Flipping Elements using scale() function

whitehouse whitehouse

1.By setting an element's scaleX() and scaleY() function value as "-1", the element's mirror image is created along the Y axis and X axis respectively.

Example: CSS3 2D transform flipping Effect

Give it a TRY! » Exercise: Try for as many positive and negative values


You can learn about CSS tranform-origin and transform using matrix() function in the next chapter