CSS transform-origin property
CSS is all about presentation. Discover how CSS transform-origin property works to transform plain HTML into a premium user experience in the guide below.
This CSS property is used to change the position of transformed elements. It is a point around which the transformation is applied. It establishes the origin of the transformation of an element. It can be applied to both 2D and 3D rotations.
The transform-origin property must be used with the transform property. The 2D transformation can change the x-axis and y-axis of the element, whereas the 3D transformation can change the z-axis along with the x-axis and y-axis.
This property can be specified by using one, two, or three values. The first value affects the horizontal position, the second value affects the vertical position, and the third value indicates the position of the z-axis. The third value can also work on 3D transformations and cannot be defined using a percentage.
If we specify only one value, the value must be a length or percentage or one of the keyword values left, center, right, top, and bottom .
If two values are specified, the initial value should be a length, percentage, or the keywords left, right, or center. The subsequent value should be a length, percentage, or one of the keywords center, top, or bottom.
When three values are specified, the initial two values mirror the syntax for two values, while the third value denotes the z-offset and should be a length measurement.
The default value of the transform-origin property is set to 50% 50%, indicating the center point of the element.
Note: If we want to use the transform-origin property, then the transform property is compulsorily utilized.
Syntax:
transform-origin: x-axis y-axis z-axis | initial | inherit;
The CSS property known as transform-origin is specified in the syntax above, with its values outlined in a table format as shown:
The values for this attribute are organized in the table provided below.
| Values | Description |
|---|---|
| x-axis | It represents the horizontal position. This value specifies the position of the view at x-axis. Its possible values are length, percentage,left, right, andcenter. |
| y-axis | It represents the vertical position. This value specifies the position of the view at y-axis. Its possible values arelength, percentage, top, bottom,andcenter. |
| z-axis | This value is used with the 3D transformations. This value specifies the position of the view at z-axis. It can be defined using thelengthvalues. It does not allow the percentage values. |
| initial | It sets the property to its default value. |
| inherit | It inherits the property from its parent element. |
Let's understand this property by using some illustrations.
Illustrations of 2D Transformation when Utilizing one Value
Illustration 1:
We will apply the transform-origin attribute with a single value specified in pixels. This property controls the origin of transformations. Elements will be rotated using the transform property.
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Illustration-1 of the transform-origin CSS property</title>
<style>
.div1 {
position: relative;
margin: 25px;
padding: 10px;
width: 150px;
height: 125px;
border: 1px solid brown;
}
.div2 {
padding: 45px;
position: absolute;
border: 1px dotted brown;
background-color: pink;
transform: rotate(60deg);
transform-origin: 50px;
}
.div3 {
position: relative;
margin: 25px;
padding: 10px;
width: 150px;
height: 125px;
border: 1px solid brown;
}
.div4 {
padding: 45px;
position: absolute;
border: 1px dotted brown;
background-color: pink;
transform: rotate(60deg);
transform-origin: 25px;
}
</style>
</head>
<body>
<h2>transform-origin CSS property utilizing one value</h2>
<h3>When transform-origin property is set to 50px:</h3>
<div class="div1">
<div class="div2"></div>
</div>
<h3>When transform-origin property is set to 25px:</h3>
<div class="div3">
<div class="div4"></div>
</div>
</body>
</html>
Output
We can observe from the following output that the transform-origin property is implemented using a single length value.
Illustration 2:
We will make use of the transform-origin attribute and set a single percentage value for it. Elements will be rotated using the transform property.
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Illustration-2 of the transform-origin CSS property</title>
<style>
.div1 {
position: relative;
margin: 25px;
padding: 10px;
width: 150px;
height: 125px;
border: 1px solid rgb(39, 202, 24);
}
.div2 {
padding: 45px;
position: absolute;
border: 1px dotted rgb(39, 202, 24);
background-color: rgb(169, 131, 15);
transform: rotate(45deg);
transform-origin: 60%;
}
.div3 {
position: relative;
margin: 25px;
padding: 10px;
width: 150px;
height: 125px;
border: 1px solid rgb(39, 202, 24);
}
.div4 {
padding: 45px;
position: absolute;
border: 1px dotted rgb(39, 202, 24);
background-color: rgb(169, 131, 15);
transform: rotate(45deg);
transform-origin: 75%;
}
</style>
</head>
<body>
<h2>transform-origin CSS property utilizing one value in the form of percentage</h2>
<h3>When transform-origin property is set to 60%:</h3>
<div class="div1">
<div class="div2"></div>
</div>
<h3>When transform-origin property is set to 75%:</h3>
<div class="div3">
<div class="div4"></div>
</div>
</body>
</html>
Output
We can observe from the following output that the transform-origin attribute is employed using a single percentage value.
Illustration 3:
We'll make use of the transform-origin attribute by assigning a keyword value to it. Subsequently, we'll rotate the elements using the transform property.
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Illustration-3 of the transform-origin CSS property</title>
<style>
.div1, .div3, .div5, .div7, .div9 {
position: relative;
margin: 25px;
padding: 10px;
width: 150px;
height: 125px;
border: 1px solid rgb(129, 10, 111);
}
.div2, .div4, .div6, .div8, .div10 {
padding: 45px;
position: absolute;
border: 1px dotted rgb(129, 10, 111);
background-color: rgb(194, 88, 236);
}
.div2 {
transform: rotate(30deg);
transform-origin: left;
}
.div4 {
transform: rotate(30deg);
transform-origin: right;
}
.div6 {
transform: rotate(30deg);
transform-origin: center;
}
.div8 {
transform: rotate(30deg);
transform-origin: bottom;
}
.div10 {
transform: rotate(30deg);
transform-origin: top;
}
</style>
</head>
<body>
<h2>transform-origin CSS property utilizing one value in the form of keywords</h2>
<h3>When transform-origin property is set to left:</h3>
<div class="div1">
<div class="div2"></div>
</div>
<h3>When transform-origin property is set to right:</h3>
<div class="div3">
<div class="div4"></div>
</div>
<h3>When transform-origin property is set to center:</h3>
<div class="div5">
<div class="div6"></div>
</div>
<h3>When transform-origin property is set to bottom:</h3>
<div class="div7">
<div class="div8"></div>
</div>
<h3>When transform-origin property is set to top:</h3>
<div class="div9">
<div class="div10"></div>
</div>
</body>
</html>
Output
Here is the result where we can observe the transform-origin attribute being implemented using a single keyword value.
Illustrations of 2D Transformation when Using Two Values
Illustration 1:
We will use the transform-origin property and set two pixel values as lengths for it.
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Illustration-1 of the transform-origin CSS property</title>
<style>
.div1, .div3 {
position: relative;
margin: 45px;
padding: 10px;
width: 200px;
height: 100px;
border: 1px solid rgb(3, 28, 1);
}
.div2, .div4 {
padding: 45px;
position: absolute;
border: 1px dotted rgb(3, 28, 1);
background-color: rgb(89, 244, 141);
}
.div2 {
transform: rotate(75deg);
transform-origin: 45px 20px;
}
.div4 {
transform: rotate(75deg);
transform-origin: 60px 50px;
}
</style>
</head>
<body>
<h2>transform-origin CSS property utilizing one value in the form of percentage</h2>
<h3>When transform-origin property is set to 45px and 20px:</h3>
<div class="div1">
<div class="div2"></div>
</div>
<h3>When transform-origin property is set to 60px and 50px:</h3>
<div class="div3">
<div class="div4"></div>
</div>
</body>
</html>
Output
Here in the displayed output, we observe that the transform-origin attribute is implemented by defining two values, specifically the length values for the x-axis and y-axis.
Illustration 2:
We will make use of the transform-origin attribute and specify two values for it in percentage format.
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Illustration-2 of the transform-origin CSS property utilizing two values</title>
<style>
.div1, .div3 {
position: relative;
margin: 45px;
padding: 10px;
width: 200px;
height: 100px;
border: 1px solid rgb(172, 77, 13);
}
.div2, .div4 {
padding: 45px;
position: absolute;
border: 1px dotted rgb(172, 77, 13);
background-color: rgb(157, 245, 252);
}
.div2 {
transform: rotate(60deg);
transform-origin: 50% 60%;
}
.div4 {
transform: rotate(60deg);
transform-origin: 45% 30%;
}
</style>
</head>
<body>
<h2>transform-origin CSS property utilizing two values as percentage</h2>
<h3>When transform-origin property is set to 50% and 60%:</h3>
<div class="div1">
<div class="div2"></div>
</div>
<h3>When transform-origin property is set to 45% and 30%:</h3>
<div class="div3">
<div class="div4"></div>
</div>
</body>
</html>
Output
Here in the provided output, we observe that the transform-origin attribute is utilized by specifying two values, specifically the percentages for the x-axis and y-axis.
Illustration 3:
In this diagram, we are employing the transform-origin attribute using keyword values to define the placement of elements. The background of transformed elements will be set as an image.
Code:
<!DOCTYPE html>
<html>
<head>
<title>Demonstration-3 of the transform-origin CSS property utilizing two values</title>
<style>
div {
height: 100px;
width: 250px;
border: 5px dotted violet;
font-size: 20px;
}
.outer1 {
margin: 100px;
background-color: cyan;
}
.box1 {
background: url("design.jpg");
transform: rotate(35deg);
transform-origin: left bottom;
}
.outer2 {
margin: 100px;
background-color: cyan;
}
.box2 {
background: url("design.jpg");
transform: rotate(45deg);
transform-origin: left top;
}
.outer3 {
margin: 50px;
background-color: cyan;
}
.box3 {
background: url("design.jpg");
transform: rotate(45deg);
transform-origin: center bottom;
}
.outer4 {
margin: 175px;
background-color: cyan;
}
.box4 {
background: url("design.jpg");
transform: rotate(45deg);
transform-origin: right top;
}
</style>
</head>
<body>
<h1>CSS transform-origin property utilizing two values with keywords</h1>
<h2>When transform-origin property is set to left and bottom:</h2>
<div class="outer1">
<div class="box1"></div>
</div> <br> <br>
<h2>When transform-origin property is set to left and top:</h2>
<div class="outer2">
<div class="box2"></div>
</div> <br> <br>
<h2>When transform-origin property is set to center and bottom:</h2>
<div class="outer3">
<div class="box3"></div>
</div> <br> <br>
<h2>When transform-origin property is set to right and top:</h2>
<div class="outer4">
<div class="box4"></div>
</div>
</body>
</html>
Output
In the provided output, we can observe that the transform-origin attribute is utilized by defining two values: the x-axis and y-axis values using keywords.
Illustrations of 3D Transformation
Now, let's implement the transform-origin attribute on elements that undergo 3D changes. We need to specify three values for 3D transformations. The initial two values, which correspond to the x-axis and y-axis, can be represented in length, percentage, or keywords. However, the third value, which represents the z-axis, must be specified in length units exclusively.
Illustration 1:
We will make use of the transform-origin attribute in this example and define three length values. We will assign a rotation3d function as a value to the transform property for conducting 3D transformations.
Code:
<!DOCTYPE html>
<html>
<head>
<title>Demonstration-1 of the transform-origin CSS property utilizing three values</title>
<style>
div {
height: 125px;
width: 250px;
border: 5px dashed rgb(81, 7, 81);
}
.box1, .box2 {
height: 100px;
width: 125px;
background-color: blueviolet;
}
.div1 {
margin: 100px;
background-color: rgb(236, 208, 250);
}
.box1 {
transform: rotate(60deg);
transform-origin: 50px 60px 50px;
}
.div2 {
margin: 100px;
background-color: rgb(236, 208, 250);
}
.box2 {
transform: rotate(60deg);
transform-origin: 75px 100px 200px;
}
</style>
</head>
<body>
<h1>CSS transform-origin property utilizing three values with length</h1>
<h2>When the transform-origin property is set to 50px at the x-axis, 60px at the y-axis and 50px at the z-axis:</h2>
<div class="div1">
<div class="box1"></div>
</div>
<h2>When the transform-origin property is set to 75px at the x-axis, 100px at the y-axis and 200px at the z-axis:</h2>
<div class="div2">
<div class="box2"></div>
</div>
</body>
</html>
Output
The transform-origin property is activated by defining three values: the length of the x-axis, y-axis, and z-axis.
Illustration 2:
In this example, we will make use of the transform-origin attribute by specifying both x-axis and y-axis values in percentages, while setting z-axis values in units of length. Additionally, we will assign a rotation3d function value to the transform attribute for carrying out a 3D transformation.
Code:
<!DOCTYPE html>
<html>
<head>
<title>Demonstration-2 of the transform-origin CSS property utilizing three values</title>
<style>
div {
height: 125px;
width: 250px;
border: 5px dashed rgb(81, 7, 81);
}
.box1, .box2 {
height: 100px;
width: 125px;
background-color: blueviolet;
}
.div1 {
margin: 100px;
background-color: rgb(236, 208, 250);
}
.box1 {
transform: rotate3d(2, 2, 1, 45deg);
transform-origin: 30% 60% 150px;
}
.div2 {
margin: 100px;
background-color: rgb(236, 208, 250);
}
.box2 {
transform: rotate3d(2, 2, 1, 45deg);
transform-origin: 45% 90% 10px;
}
</style>
</head>
<body>
<h1>CSS transform-origin property utilizing three values with x-axis and y-axis in percentage and z-axis in length</h1>
<h2>When the transform-origin property is set to 30% at the x-axis, 60% at the y-axis, and 150px at the z-axis:</h2>
<div class="div1">
<div class="box1"></div>
</div>
<h2>When the transform-origin property is set to 45% at the x-axis, 90% at the y-axis, and 10px at the z-axis:</h2>
<div class="div2">
<div class="box2"></div>
</div>
</body>
</html>
Output
We can observe that the transform-origin attribute is utilized by providing three values: the x-axis and y-axis values in percentage, and the z-axis value as a length.
Illustration 3:
We will apply the transform-origin attribute in this example, specifying keywords for the x-axis and y-axis, and length values for the z-axis. To achieve 3D transformation, we will assign a value using the rotation3d function to the transform property.
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Illustration-3 of the transform-origin CSS property utilizing three values</title>
<style>
div {
height: 75px;
width: 350px;
border: 5px dotted violet;
font-size: 20px;
}
.outer1 {
margin: 100px;
background-color: cyan;
text-align: center;
}
.box1 {
background: url("design.jpg");
transform: rotate3d(3, 2, 1, 75deg);
transform-origin: top right 150px;
}
.outer2 {
margin-left: 350px;
background-color: cyan;
text-align: center;
}
.box2 {
background: url("design.jpg");
transform: rotate3d(2, 2, 1, 75deg);
transform-origin: bottom right 200px;
}
</style>
</head>
<body>
<h1>CSS transform-origin property utilizing three values with x-axis and y-axis as keywords and z-axis in length</h1>
<h3>transform-origin: top right 150px;</h3>
<div class="outer1">
<div class="box1"></div>
</div>
<h3>transform-origin: bottom right 200px</h3>
<div class="outer2">;
<div class="box2"></div>
</div>
</body>
</html>
Output
Conclusion
This tutorial has provided an explanation of the CSS transform origin. The transform-origin attribute defines the starting point of elements after transformation. Transformations can be categorized into 2D and 3D variations. The 2D transformation alters the element along the x-axis and y-axis, while the 3D transformation modifies the x-axis, y-axis, and z-axis of the element.
