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()
-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
the CSS3 Transforms module ( ) did include skew(), and you may
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.
Search WWH ::

Custom Search