0 added
0 removed
Original
2026-01-01
Modified
2026-03-09
1
<p>Now that the ancient evil power has been defeated, and Pendalf has made it back home, it’s time to figure out another subtle detail of how transforms work, namely the transform-origin property. (And let’s also hang a commemorative photo on the wall).</p>
1
<p>Now that the ancient evil power has been defeated, and Pendalf has made it back home, it’s time to figure out another subtle detail of how transforms work, namely the transform-origin property. (And let’s also hang a commemorative photo on the wall).</p>
2
<p>This property is used in conjunction with the transform property to assign the origin of the coordinate system that will be used to perform the transforms.</p>
2
<p>This property is used in conjunction with the transform property to assign the origin of the coordinate system that will be used to perform the transforms.</p>
3
<p>The transform-origin syntax for 2D transforms is as follows:</p>
3
<p>The transform-origin syntax for 2D transforms is as follows:</p>
4
transform-origin: origin-along-X-axis [origin-along-Y-axis]<p>The property values are specified in the browser using width units (px, em…), as a %, and also using the keywords left, right, top, bottom and center.</p>
4
transform-origin: origin-along-X-axis [origin-along-Y-axis]<p>The property values are specified in the browser using width units (px, em…), as a %, and also using the keywords left, right, top, bottom and center.</p>
5
<p>By default, the value of transform-origin is equal to 50% 50%, that is, the origin of the coordinate system is at the center of the object. If you do not specify the value of origin-along-Y-axis, then it is considered equal to 50%.</p>
5
<p>By default, the value of transform-origin is equal to 50% 50%, that is, the origin of the coordinate system is at the center of the object. If you do not specify the value of origin-along-Y-axis, then it is considered equal to 50%.</p>
6
<p>Let’s take a look at the scale function in the example and how the transform behaves with different values of transform-origin: in this case, the block will be resized relative to the given point.</p>
6
<p>Let’s take a look at the scale function in the example and how the transform behaves with different values of transform-origin: in this case, the block will be resized relative to the given point.</p>