HTML and CSS Reference
In-Depth Information
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:
-webkit-transform: skewY(10deg);
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.
matrix()
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-
transform-origin
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+
