Tutorials


CSS transform property


The transform property in CSS allows you to apply various transformations to an element, such as rotating, scaling, skewing, or translating (moving) it. These transformations can be 2D or 3D, depending on the function used.

Syntax

selector {
  transform: function(value);
}

You can combine multiple transformations by separating them with a space:

selector {
  transform: function1(value1) function2(value2);
}

2D Transform Functions

  1. translate(x, y): Moves an element from its current position by the specified x and y values.

    • Example:
      transform: translate(50px, 100px);
    • Moves the element 50px to the right and 100px down.

  2. rotate(angle): Rotates the element by the specified angle. The angle can be in degrees (deg), radians (rad), or other angle units.

    • Example:
      transform: rotate(45deg);
    • Rotates the element 45 degrees clockwise.

  3. scale(x, y): Scales an element by the specified factors along the x and y axes. A value of 1 represents the original size, values greater than 1 enlarge the element, and values less than 1 shrink it.

    • Example:
      transform: scale(1.5, 2);
    • Enlarges the element by 1.5 times along the x-axis and 2 times along the y-axis.

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

    • Example:
      transform: skew(30deg, 10deg);
    • Skews the element 30 degrees along the x-axis and 10 degrees along the y-axis.

  5. matrix(a, b, c, d, e, f): Applies a 2D transformation using a matrix of six values, which allows for a combination of translations, rotations, scalings, and skews.

    • Example:
      transform: matrix(1, 0, 0, 1, 50, 100);
    • This is equivalent to translate(50px, 100px).

3D Transform Functions

  1. translate3d(x, y, z): Moves an element in 3D space by the specified x, y, and z values.

    • Example:
      transform: translate3d(50px, 100px, 200px);
    • Moves the element 50px along the x-axis, 100px along the y-axis, and 200px along the z-axis.

  2. rotateX(angle): Rotates the element around the x-axis by the specified angle.

    • Example:
      transform: rotateX(45deg);
    • Rotates the element 45 degrees around the x-axis.

  3. rotateY(angle): Rotates the element around the y-axis by the specified angle.

    • Example:
      transform: rotateY(45deg);
    • Rotates the element 45 degrees around the y-axis.

  4. rotateZ(angle): Rotates the element around the z-axis by the specified angle (equivalent to rotate in 2D).

    • Example:
      transform: rotateZ(45deg);

  5. scale3d(x, y, z): Scales the element in 3D space by the specified x, y, and z factors.

    • Example:
      transform: scale3d(1.5, 2, 0.5);

  6. perspective(value): Applies a perspective view to the element, making the 3D transformations more pronounced.

    • Example:
      transform: perspective(500px) rotateX(45deg);

Combining Transforms

You can apply multiple transformations in one transform property by separating them with spaces:

transform: rotate(45deg) scale(1.5) translate(50px, 100px);

This will rotate the element by 45 degrees, scale it by 1.5 times, and then move it 50px to the right and 100px down.

Practical Example

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS Transform Example</title>
  <style>
    .box {
      width: 100px;
      height: 100px;
      background-color: lightblue;
      margin: 50px;
      transition: transform 0.5s ease;
    }

    .box:hover {
      transform: rotate(45deg) scale(1.2) translate(20px, 20px);
    }
  </style>
</head>
<body>
  <div class="box"></div>
</body>
</html>

Explanation

  • Initial State: The box is a 100x100px square with a light blue background.
  • On Hover: When the box is hovered, it:
    • Rotates 45 degrees.
    • Scales up by 1.2 times.
    • Moves 20px to the right and 20px down.



Next Previous




@aCodeTutorials All Rights Reserved
privacy policy | about