HTML and CSS Reference
In-Depth Information
.box {
transform: translate(-20px, 30px)
}
The first value in the
translate()
function defines the movement on the
x
axis (horizont-
al movement), and the second value defines the movement on the
y
axis (vertical movement).
The alternative
translateX()
and
translateY()
functions define the
x
and
y
move-
ment directly, each accepting a single value.
scale
The
scale()
function lets you change the size of an element by defining a pair of unitless
numbers for the sizing along the
x
and
y
axes. Like
translate()
, the alternatives to
scale()
are
scaleX()
and
scaleY()
. So we could change the size of our box like this:
.box {
transform: scale(1.2, 1.5);
}
This will scale the box up 1.2 times its size horizontally, and 1.5 times its original size vertic-
ally. If we were to scale the element by
1
or
1, 1
, it'd have no effect because
1
represents
the element's original size. If we leave out the second unit, it's assumed that the first unit
defines both horizontal and vertical sizing. A value of less than 1 (such as
0.5
) will scale the
element down from its original size.
rotate
The
rotate()
function does exactly what the name implies—it rotates the element by a
value defined in degrees:
.box {
transform: rotate(45deg);
}
This will rotate the box 45 degrees clockwise. A negative value will rotate the box counter-
clockwise.
