Web Development
Transform in CSS

Transform in CSS

Jeevan Henry Dsouza's photo
Jeevan Henry Dsouza
·

2 min read

Table of contents

Transform

  1. The transform property in CSS is used to apply various types of transformations to an element. It allows you to modify the appearance and layout of an element by scaling, rotating, translating (moving), or skewing it.

  2. The transform property can be applied to both 2D and 3D transformations. Here's the basic syntax for the transform property:

transform: [transform-function];

The [transform-function] represents one or more transformation functions that are applied to the element. Multiple transformation functions can be combined by separating them with spaces.

Here are some commonly used transformation functions:

  1. 2D Transformations:

    • translate(x, y): Moves the element along the horizontal (x) and vertical (y) axes.

    • scale(x, y): Scales the element by a factor of x horizontally and y vertically.

    • rotate(angle): Rotates the element by the specified angle in degrees.

    • skew(x-angle, y-angle): Skews the element by the specified angles in degrees along the x and y axes.

  2. 3D Transformations:

    • translate3d(x, y, z): Moves the element in 3D space along the x, y, and z axes.

    • scale3d(x, y, z): Scales the element in 3D space along the x, y, and z axes.

    • rotate3d(x, y, z, angle): Rotates the element in 3D space around the specified axis vector (x, y, z) by the specified angle in degrees.

    • perspective(n): Specifies a perspective view for 3D transformations.

Here's an example that demonstrates the usage of the transform property:

.box {
  width: 200px;
  height: 200px;
  background-color: blue;
  transform: rotate(45deg) scale(1.2);
}

In this example, the .box element will be rotated by 45 degrees clockwise and scaled up by 1.2 times in both the horizontal and vertical directions.

The transform property provides a powerful way to manipulate the appearance and position of elements on a web page. It enables you to create visually interesting effects and animations by applying various transformations.

transformCSS