The CSS property transform-origin defines the point around which a transformation is applied to an element. It is the point or origin of the transform property which can change the point of transformations like rotation, scaling, skewing, etc. By default, the transform-origin of an element is relative to the center of an element.
Video Tutoral at https://youtu.be/-MZvSn6pOyg
The transform-origin property is used along with the transform property. For example, if we use, transform: rotateZ(30deg); and transform-origin: top;, the point of transformation or rotation starts from the top center.
If you want to keep the transform-origin at the center, then there is no need to use the transform-origin property. This is because the transform-origin is at the center by default. However, if you want to shift your transform-origin, then you have to use it.
If we set here the transform-origin: bottom;, then the transform-origin is at the bottom center. Similarly, you can set transform-origin: left;, transform-origin: right;, transform-origin: top;, transform-origin: top right;, transform-origin: bottom left;, etc.
transform-origin: top right; Here the transform-origin has shifted to the top right corner.
Instead of using transform-origin: right bottom;, we can use transform-origin: 100% 100%;. Here, the first value is x, and the second value is y. Both x and y move 100% away from 0, intersecting at the right bottom corner. So, transform-origin: 100% 100%; is the same as transform-origin: right bottom;.
transform-origin: 50%; : Here, 50% represents the X value. Even though nothing is mentioned for Y, it still means that the Y value is 50% by default.
transform-origin: 50% 50%; : In this case, we find that both the x and y values are each specified as 50%.
transform-origin: 50% 0; : Here, the x value is 50% and the y value is 0, which sets the transform-origin to the top center.
Here are some examples of transform-origin values that give the same effects. Please go through all of these:
/* Left transform-origin */
transform-origin: 0;
transform-origin: left;
transform-origin: center left;
transform-origin: left center;
transform-origin: 0 50%;
/* Top left transform-origin */
transform-origin: top left;
transform-origin: left top
transform-origin: 0 0;
/* Top transform-origin */
transform-origin: top;
transform-origin: top center;
transform-origin: center top;
transform-origin: 50% 0;
/* Top right transform-origin */
transform-origin: top right;
transform-origin: right top;
transform-origin: 100% 0;
/* Right transform-origin */
transform-origin: right;
transform-origin: 100%;
transform-origin: center right;
transform-origin: right center;
ransform-origin: 100% 50%;
/* Bottom right transform-origin */
transform-origin: bottom right;
transform-origin: right bottom;
transform-origin: 100% 100%;
/* Bottom transform-origin */
transform-origin: bottom;
transform-origin: bottom center;
transform-origin: center bottom;
transform-origin: 50% 100%;
/* Bottom left transform-origin */
transform-origin: bottom left;
transform-origin: left bottom;
transform-origin: 0 100%;
Index
CSS
Result
Hover your mouse on the above square.
Transform-origin: x-offset value, y-offset value, z-offset value; This is the main syntax for transform-origin values. We have x-offset value which defines the horizontal position of the origin. The second one is y-offset value which defines the vertical position of the origin and the third is z-offset value which defines the position along the z-axis (depth) when using 3D transformations.
Transform-origin value can be one-value syntax, two-value syntax and three-value syntax. The three-value syntax can be used specially in a 3D element. Here are examples of one-value syntax, two-value syntax, and three-value syntax. Please go through all of these. Please note that z-offset cannot be used in percentage because there is no measurable or clear size on the z-axis.
Examples:
/* 1. One-value syntax */
transform-origin: 3px;
transform-origin: top;
/* 2. Two-value syntax */
transform-origin: 5cm 3px;
transform-origin: 80% 30%;
transform-origin: left 2px;
transform-origin: right top;
transform-origin: top right;
/* 3. Three-value syntax */
transform-origin: 2px 30% 10px;
transform-origin: left 5px -4px;
transform-origin: right bottom 5cm;
transform-origin: bottom right 9cm;
We can also use Global Values in transform-origin. Here, we have:
/* Global values: */
transform-origin: inherit;
transform-origin: initial;
transform-origin: revert;
transform-origin: revert-layer;
transform-origin: unset;
In CSS, global values control how properties are applied or reset by inheriting values, using default settings, or reverting to previous or default states.
So in conclusion, the transform origin is very useful when we animate or style our transformations. By changing the transform origin, we can make the visual effect of an element look much better.
.
No comments
Post a Comment