Pro CSS3 Animation

CHAPTER 2 ■ CSS3 TRAnSfoRmS And TRAnSiTionS

A combination of both horizontal and vertical skew with appropriate values while translating the element in
the corresponding directions can provide the impression that the element forms one side of a box, as shown in
Listing 2-8.

Listing 2-8. CSS Code to Transform an Image into One Side of an Isometric Box

img.tilt {
width: 300px; height: 300px; float: left;
-moz-transform: skewY(30deg); -o-transform: skewY(30deg);
-ms-transform: skewY(30deg); -webkit-transform skewY(30deg);
transform: skewY(30deg);
}

Combining individual transformations together (for example, a rotation and translation) provides much
more power to your CSS and gives you many more possibilities for animation.

Combining Transformations

You can merge transformations for an element in one of two ways: as space-separated values of a transform
property, or as values for a matrix property.
To merge transformations as space-separated values of a transform property, use the code shown in
Listing 2-9.

Listing 2-9. Multiple Transforms in a Single CSS Declaration

img.tilt { width: 300px; height: 300px; float: left;
-moz-transform: translate(50px, -4em) rotate(15deg);
-webkit-transform: translate(50px, -4em) rotate(15deg);
-o-transform: translate(50px, -4em) rotate(15deg);
-ms-transform: translate(50px, -4em) rotate(15deg);
transform: translate(50px, -4em) rotate(15deg); }

The process for merging transformations as values for a matrix property is significantly more complicated.
Matrix transformations are a little beyond the scope of this book; it’s easiest to use a tool to generate the code.
The Useragentman Matrix Construction Set (www.useragentman.com/matrix/) and CSS3 Transform Matrix
Calculator (www.leeourand.com/test/transform/test/transform.html) offer two ways of doing so. An explanation
of matrix transformations can be found at The CSS Matrix Transform for the Mathematically Challenged
(www.useragentman.com/blog/2011/01/07/css3-matrix-transform-for-the-mathematically-challenged/)

21 °

skewX(21deg)

Figure 2-7. A rectangular element skewed with CSS