2D Transforms and Transitions - Beginning CSS3 - page 447

The cosine of -90° is 0 and the sine is -1 , so the equivalent style using the matrix() function in matrix_5.
html looks like this:

h1 {
transform: matrix(0, -1, 1, 0, 0, 215);
transform-origin: left top;
}

This produces the same result as Figure 20-7 .

■ Although the translate arguments come last in the matrix() function, it's clear that the heading is moved
before it's rotated. otherwise, the heading would have moved along the Y axis in the local coordinate system.

Note

Animating Property Values with CSS Transitions
When the value of a property changes—such as on hovering over an element—the change is instantaneous.
When you mouse over a link, the speed of the change isn't really important. But when an image is scaled up on
hover, as in one of the examples earlier in this chapter, the sudden jump is jarring.
CSS transitions overcome this problem by animating a smooth change between one state and another over a
specified duration. For example, you can scale and rotate the image over a period of one second. When you move
the mouse away from the image, the transition is reversed, returning to its original state over the same duration.
Transitions can be applied to all elements including the ::before and ::after pseudo-elements.
You define a transition using the properties listed in Table 20-3 .

Table 20-3. CSS Transition Properties

Property Initial Value Description

transition-property all Specifies the name(s) of the CSS properties to which the

transition is to be applied.

transition-duration 0s Specifies how long the transition should take in seconds ( s )

or milliseconds ( ms ). Negative values are not allowed.

transition-timing-function ease Describes the pace of change using easing or stepping

keywords or functions.

transition-delay 0s Defines when the transition should start measured in

seconds or milliseconds. A positive value delays the start.
A negative value initiates the transition immediately,
but part-way through its cycle at the point it would have
reached after the specified offset.

transition Shorthand property that sets all four values in a single

declaration.

The properties in Table 20-3 are not inherited. If you want an element to use the same value as its parent,
you can use the inherit keyword.