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 {
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
n Note You can read about more transform techniques at
CSS/transform .
Search WWH ::

Custom Search