CSS transform

Prev Next

CSS transforms allow you to change the shape, size, and position of elements in a web page, enabling dynamic and visually engaging effects. Transforms can be applied in both 2D and 3D space, providing a wide range of possibilities for creating interactive and visually appealing designs.

What is 2D Transform?

2D transforms manipulate elements in two-dimensional space, affecting their position and appearance on the X and Y axes. These transformations are applied using the transform property and include operations such as:

• Translate: Moves an element horizontally and/or vertically.

• Rotate: Rotates an element around a specified point.

• Scale: Resizes an element by scaling its width and height.

• Skew: Skews an element along the X and Y axes.

Translate:

Moves an element from its current position.

Syntax: transform: translate(x, y);

.translate-example {
transform: translate(50px, 100px);
}

Moves the element 50 pixels to the right and 100 pixels down.

Rotate:

Rotates an element around its origin.

Syntax: transform: rotate(angle);

.rotate-example {
transform: rotate(45deg);
}

Rotates the element 45 degrees clockwise.

Scale:

Resizes an element relative to its original size.

Syntax: transform: scale(x, y);

.scale-example {
transform: scale(1.5, 2);
}

Scales the element to 150% of its width and 200% of its height.

Skew:

Skews an element along the X and Y axes.

Syntax: transform: skew(x-angle, y-angle);

.skew-example {
transform: skew(20deg, 10deg);
}

Skews the element 20 degrees along the X-axis and 10 degrees along the Y-axis.

What is 3D Transform?

3D transforms extend the capabilities of 2D transforms by introducing depth, allowing you to manipulate elements along the Z-axis in addition to the X and Y axes. This adds a third dimension to your transformations, enabling effects such as rotating elements in 3D space or creating perspective.

3D Transforms Include:

• TranslateZ: Moves an element along the Z-axis (depth).

• RotateX: Rotates an element around the X-axis.

• RotateY: Rotates an element around the Y-axis.

• Perspective: Defines how the 3D space is viewed, affecting the depth of elements.

• Transform-style: Determines how nested elements are rendered in 3D space

TranslateZ:

Moves an element along the Z-axis.

Syntax: transform: translateZ(value);

.translatez-example {
transform: translateZ(100px);
}

Moves the element 100 pixels away from the viewer.

RotateX:

Rotates an element around the X-axis.

Syntax: transform: rotateX(angle);

.rotatex-example {
transform: rotateX(45deg);
}

Rotates the element 45 degrees around the X-axis.

RotateY:

Rotates an element around the Y-axis.

Syntax: transform: rotateY(angle);

.rotatey-example {
transform: rotateY(45deg);
}

Rotates the element 45 degrees around the Y-axis.

Perspective:

Defines the perspective from which 3D elements are viewed.

Syntax: perspective(value);

.perspective-example {
perspective: 500px;
}

Sets the perspective distance to 500 pixels.

Transform-style:

Determines how nested elements are rendered in 3D space.

Syntax: transform-style: preserve-3d;

.preserve3d-example {
transform-style: preserve-3d;
}

Keeps the 3D transformations of child elements intact.

Combined Transform Example:

<!DOCTYPE html>
<html>
<head>

  <title>CSS Transform Example</title>

  <style>
    .transform-container {
      perspective: 1000px;
    }

    .transform-box {
      width: 150px;
      height: 150px;
      background-color: lightblue;
      transform-style: preserve-3d;
      transition: transform 1s;
    }

    .transform-box:hover {
      transform: rotateY(45deg) rotateX(30deg) translateZ(100px) scale(1.2);
    }
  </style>
</head>

<body>

  <div class="transform-container">
    <div class="transform-box"></div>
  </div>

</body>
</html>

Output:

Prev Next