CSS transform-origin Property

Posted in CSS Tutorial

Updated on Oct 13, 2024

By Mari Selvan

👁️ 22 - Views

⏳ 4 mins

💬 1 Comment

Photo Credit to CodeToFun

🙋 Introduction

The transform-origin property in CSS is used to change the position of the origin of a transformation. By default, transformations like rotate, scale, and skew are performed around the center of an element.

The transform-origin property allows you to adjust this point to a different location within the element.

💡 Syntax

The syntax for the transform-origin property is straightforward. You can specify one, two, or three values to set the origin point along the x-axis, y-axis, and z-axis.

Syntax

Copied

element {
  transform-origin: x-axis y-axis z-axis;
}

x-axis: Defines where the transformation's x-origin is located.
y-axis: Defines where the transformation's y-origin is located.
z-axis (Optional): Defines where the transformation's z-origin is located.

🎛️ Default Value

The default value of the transform-origin property is 50% 50% 0, which means the transformation is performed around the center of the element along the x and y axes, with no offset along the z-axis.

🏠 Property Values

Value	Description
length	A length value (e.g., 10px, 2em) that defines the origin point.
percentage	A percentage value (e.g., 50%, 0%) relative to the element's size.
keyword	Keywords such as top, bottom, left, right, and center.
z-axis (optional)	A length or percentage defining the z-axis origin.

📄 Example

In this example, we'll change the transform origin of a square to the top left corner and rotate it by 45 degrees.

index.html

Copied

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS transform-origin Example</title>
  <style>
    .box {
      width: 100px;
      height: 100px;
      background-color: lightblue;
      transform-origin: top left;
      transform: rotate(45deg);
    }
  </style>
</head>
<body>
  <h1>Box with Custom Transform Origin</h1>
  <div class="box"></div>
</body>
</html>

🖥️ Browser Compatibility

The transform-origin property is supported in all modern browsers, including the latest versions of Chrome, Firefox, Safari, Edge, and Opera. Ensure that your website is tested across different browsers to confirm compatibility.

🎉 Conclusion

The transform-origin property is an essential tool for web developers looking to create complex and visually engaging transformations.

By adjusting the origin point of transformations, you can achieve a wide range of effects and animations that enhance the user experience. Experiment with different origin points and see how this property can elevate your web designs.