HTML and CSS Reference
In-Depth Information
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.
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
Initial Value
Specifies the name(s) of the CSS properties to which the
transition is to be applied.
Specifies how long the transition should take in seconds ( s )
or milliseconds ( ms ). Negative values are not allowed.
Describes the pace of change using easing or stepping
keywords or functions.
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.
Shorthand property that sets all four values in a single
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.
Search WWH ::

Custom Search