CSS transform-origin

The transform-origin CSS property allows you to change the point around which a transformation is applied to an element.

By default, the transform-origin of an element is the center of the element. You can change this point by specifying a different origin using the transform-origin property.

The transform-origin property takes three values: x-coordinate y-coordinate z-coordinate. The x-coordinate and y-coordinate values are specified in percentage or length units, while the z-coordinate value is optional and only applicable for 3D transformations.

Here's an example of how to use the transform-origin property:

Result:


    .box {
      width: 100px;
      height: 100px;
      background-color: lightblue;
      transform: rotate(45deg);
      transform-origin: 20% 40%;
    }

Example Box

In this example, we have a box element that has a width and height of 100px and a light blue background. We've applied a rotate(45deg) transformation to the box and changed the transform-origin to be at 20% from the left and 40% from the top of the box.

As a result, the box will be rotated 45 degrees around the point that is 20% from the left and 40% from the top of the box, instead of the center of the box.