HTML and CSS Reference
In-Depth Information
Now look at that code you added:
-webkit-transform: translate(50px, -25px) rotate(-45deg);
Because the banner is to be both translated and rotated, you add two functions to the
transform
declaration, sep-
arated by a space. You can give a
transform
declaration as many functions as required.
You can give the rotate function a value either in degrees, gradians, radians, or turns:
•
Degrees (
deg
)
—There are 360 degrees in a full circle.
•
Gradians (
grad
)
—There are 400 gradians in a full circle.
•
Radians (
rad
)
—There are 2π radians in a full circle (meaning 3.1415 is the equivalent of 180 degrees).
•
Turn (
turn
)
—There is 1 turn in a full circle.
When you specify a
rotate()
value of
-45deg
, the banner is rotated counterclockwise by 45 degrees. A positive
number rotates an element clockwise.
scale(), scaleX(), and scaleY()
The
scale()
function increases or decreases an element in size. As with
translate()
,
scale()
takes two ar-
guments: the X and Y axes. If the second value is absent in
scale()
, however, unlike
translate()
, that one
value is applied to both the X and Y axes. If you want to transform only one axis, you can use the functions
scaleX()
and
scaleY()
.
1.
In styles.css, change the
transform
declaration in the
.banner-ad
rule set to include a
scale()
function:
-webkit-transform: translate(50px, -25px) rotate(-45deg) scale(1.1);
2.
Save styles.css.
When you specify a
scale()
value of
1.1
, the banner element and its contents are scaled by 110% of its original
size. You can give
scale()
only a number, which is a multiplication of its calculated size.
skewX() and skewY()
Skewing an element makes that element appear slanted or twisted.
You may be wondering why there's no
skew()
function to go with
skewX()
and
skewY()
. An early version of
find browsers still render the function, but it has been removed from the specification. This was due to concerns
about its name being misleading. For this reason, you should only use
skewX()
and
skewY()
.
skewX()
and
skewY()
skew an element around its X and Y axis, respectively.
I'll use the More Information button to demonstrate skew transforms but not actually keep the effect:
-webkit-transform: skewX(10deg);
As shown in Figure 12-5, when you give the rule set
.showcase .button
a
transform
of
skewX(10deg)
,
the More Information button is skewed 10 degrees counterclockwise from the Y axis.
