HTML and CSS Reference
In-Depth Information
border: 2px solid #071394;
-ms-transform:skew(10deg) scale(0.9);
-moz-transform:skew(10deg) scale(0.9);
-webkit-transform:skew(-10deg) scale(0.9);
-o-transform:skew(10deg) scale(0.9);
}
This rule uses the
skew()
function as well as the
scale()
function.
skew()
takes an angle in degrees
that specifies how much the element is skewed.
scale()
takes a number indicating how much the element
should be shrunk or stretched. For example, a scale value of
2
means the element is stretched to twice its
original size. You can also use the
scaleX()
and
scaleY()
functions to control x and y scaling values,
respectively. Figure 13-21 shows the resulting element.
Figure 13-21. Skewing
and scaling effects applied to an element
You can also use transforms and transitions together, as shown in the following CSS rules:
.myclass {
-moz-transition: all 3s;
-webkit-transition: all 3s;
-o-transition: all 3s;
}
.myclass:hover {
-ms-transform:rotate(10deg);
-moz-transform:rotate(10deg);
-webkit-transform:rotate(10deg);
-o-transform:rotate(10deg);
}
The
.myclass:hover
rule uses the
rotate()
function to transform the element. The
.myclass
rule uses
the
transition
property to specify that all properties from the
:hover
pseudo-class should be animated for
three seconds. This way, when you hover mouse pointer on the
<div>
, the
<div>
is rotated 10 degrees
clockwise.
n
Note
You can read about more transform techniques at
https://developer.mozilla.org/en-US/docs/
CSS/transform
.
