CSS3 2D Transforms

CSS3 2D Transforms

CSS 3 transform feature is used to change the shape or appearance of an HTML element either in two dimensions(2D Transform) or three dimension(3D Transform) using transform property.

The CSS3 transform is a process of transforming an HTML element. It is of two types.

  • 1.0 2D Transformation
  • 2.0 3D Transformation

CSS3 2D Transformation

It is used to transform the HTML element in two dimension direction such as x-axis or y-axis. It has followings important methods.

  • translate()
  • scale()
  • skewX()
  • skewY()
  • rotate()
  • matrix()

Translate() method

The translate() method is used to transform an HTML element in the X or Y axis.

General Syntax

Try it now

Source Code

Try it now

The translateX() Function

The translateX() function is used to to move an element along the X-axis only.

General Syntax

Try it now

Source Code

Try it now

The translateY() Function

The translateY() function is used to move an element along Y-axis only.

General Syntax

Try it now

Source Code

Try it now

The scale() Method

The transform scale() method is used to scale the HTML element along the X-axis, Y-axis, or both the axis. The scale contains one or two properties inside the parenthesis.

If the scale() method contains single properties then it scales the HTML element on both the X and Y axis. If the scale() method contains two properties then the first value is used to transform the HTML element in X-axis and the second value transforms the HTML element in Y-axis.

General Syntax

Try it now

Source Code

Try it now

The SkewX() Function

The skewX() function is used to skews an HTML element along the X-axis by the specified angle.

General Syntax

Try it now

Source Code

Try it now

The SkewY() Function

The skewY() function is used to skews an HTML element along the Y-axis by the specified angle.

General Syntax

Try it now

Source Code

Try it now

Transform Skew() Function

Transform skew() function is used to skew the HTML element on the X-axis and Y-axis by the given angles.

General Syntax

Try it now

Source Code

Try it now

The rotate() Function

The rotate() function is used to rotate the HTML element along X-axis,Y-axis or Z-axis around its origin by the given angles. The origin of the rotating element can be defined using the transform-origin property.

Please keep in mind that the default transform-origin is the center center.

Followings are the transform origin property:

  • transform:rotateZ()
  • transform:rotateX()
  • transform:rotateY()

Source Code

Try it now

Code Explanation

The function rotate(50deg) rotates the image in the clockwise direction about its origin by the angle of 50 degrees. You can use negative values to rotate the element counter-clockwise.

Rotating Around Z-axis

Let us rotate HTML element along z-axis by 180deg.

General Syntax

Try it now

Source Code

Try it now

Rotating Around X-axis

Let us rotate HTML element around X-axis by 70deg.

General Syntax

Try it now

Source Code

Try it now

Rotating Around Y-axis

Let us rotate, the HTML element around Y-axis by 180deg.

General Syntax

Try it now

Source Code

Try it now

The matrix() Function

The matrix() function is a combination of scaleX(), skewY(), skewX(), scaleY(), translateX() & translateY(). It takes six parameters in the form of a matrix which can be written as matrix(a, b, c, d, e, f).

General Syntax


so, in simple terms, the syntax is like –


Here, a & d help in scaling up or down the elements. It is like scale(a,d).

Similarly, b,c skew the element in the X, and Y axis respectively. It is like skew(b,c).

While, e, f help to translate the element(move the element) from one position to another. It is like translate(e,f).

Source Code

Try it now