HTML and CSS Reference
In-Depth Information
A
NOTE
ABOUT
TRANSFORM-ORIGIN
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
Percentages
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?
