HTML and CSS Reference
In the “rotate” section, notice that the rotation happens around the center
of the element, which may or may not be what you want. The good news is
that you can alter the position of the point the transform happens around
using the transform-origin property. Return to the transform-2drotate.html
file and uncomment the following property (+ prefixed versions) to see what
effect it has on the result:
transform-origin: top left;
Yo u ' if if if n d transform-origin 's possible values easy to understand if you are
already experienced in CSS2. They work the same as background-position
values. Therefore, you can set values using:
Any standard CSS distance units, such as px , em , rem , cm , and so on
Keywords, such as center , top left , bottom right .
Yo u c a n m if x a n d m at c h d if fe re nt va if u e s fo r t h e h o r if zo nt a if a n d ve r t if c a if if if yo u
like, for example, top 35% . If you set only one value, it is assumed to be the
horizontal value with a vertical value of 50% .
Finally, you can set negative values to set the rotation point somewhere out-
side the element you are transforming.
Note that transform-origin can also affect other types of transforms, such
as scale , and the effect is more noticeable when you start combining trans-
forms with transitions. Do you want your element to grow from the top-left
down and to the right, or do you want it to grow from the center outwards?