HTML and CSS Reference
Figure 12-5 The More Information button with a 10-degree skew applied to the X axis.
When skewX(10deg) is replaced with skewY(10deg) , like so:
The button is skewed 10 degrees clockwise from the X axis, as shown in Figure 12-6.
Figure 12-6 The More Information link with a 10-degree skew applied to the Y axis.
If you want to skew both axes, rather than use the no-longer standard skew() function, simply use both skewX()
and skewY() separated by a space:
-webkit-transform: skewX(10deg) skewY(10deg);
Skew functions accept degrees, radians, or gradians as arguments.
The transform property also accepts the matrix() function, which allows for complex transformations. Be-
cause this is an advanced feature, it is not demonstrated in CSS3 Foundations, but if you want to learn more, I re-
commend reading Opera's article, “Understanding the CSS Transforms Matrix,” available at ht-
Initial value: 50% 50% | Inherited: No | Applies to: All elements with a display declaration relating to block, inline
or table | CSS3
Unprefixed browser support: IE 10+, Firefox 16+, Opera 12.5+
Prefixed browser support: IE 9+, Firefox 3.5+, Chrome 12+, Opera 10.5+, Safari 3.1+