Transform origin property (transform-origin)

The transform-origin CSS3 property lets you modify the position origin for transformations of an element. For example, the transform-origin of the rotate() function is the centre of rotation. A 2D transformed element can change the X- and Y-axis of the element, while a 3d transformed element can also change the Z-axis.

Syntax:

selector {

transform-origin: x-axis y-axis z-axis | initial | inherit;

}

Values:

The property values for the transform-origin are these:

x-axis; Transforms the position origin of an element by X-axis; Possible values are:
- left
- center
- right
- length (px, em…)
- %
y-axis; Transforms the position origin of an element by Y-axis; Possible values are:
- top
- center
- bottom
- length (px, em…)
- %
z-axis; In 3D transformation, it transforms the position origin of an element by Z-axis; Possible values are:
- length (px, em…)
initial, inherit

NOTE: Note that examples from this moment on for simplicity reasons may not include proprietary selectors from this point on.

Example

The transform-origin property example:

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
div {
    position: relative;
    height: 70px; width: 70%;
    margin: 5%;
    padding: 10px;
    border: 2px solid green;
    background-color: red;
}
div div {
    position: absolute;
    background-color: yellow;
    transform: rotate(45deg);
    transform-origin: 20% 40%;
     /* ADD proprietary selectors if needed */
}
</style>
</head>
<body>

<div>
  <div>Tranform-origin property example!</div>
</div>


</body>
</html>

›› go to examples ››

Transform origin property (transform-origin)

Syntax:

Values:

Example

The transform-origin property example:

Comments

About

Contact

Get Connected