Loading…
Everything will be ready in few seconds
- Theory
- Theory
- Comments
Features of transform-origin, part 1
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).
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.
The transform-origin
syntax for 2D transforms is as follows:
transform-origin: origin-along-X-axis [origin-along-Y-axis]
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
.
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%
.
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.
- index.html
- style.css
Thanks! We’ll fix everything at once!
The code has changed, click “Refresh” or turn autorun on.
You’ve gone to a different page
Click inside the mini-browser to shift the focus onto this window.
Comments