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.
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.
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-
Search WWH ::

Custom Search