Scaling Elements

To scale an element, use the transform property and set its value with the scaleX(), scaleY(), or scale() functions. The first two functions take a number as their sole argument, and use it as a scaling factor for the X or Y axis, respectively. For example, scale_1.html contains three identical headings in a large bold font. The first one is rendered at its normal size, but the second one is scaled to half its normal width, and the third one to half its normal height. By default, scaling is done from the center of an element, so transform-origin is set to left to anchor the headings in their original position:

h1 {
    font-family:"Arial Black", Gadget, sans-serif;
    font-size:48px;
    margin: 5px;
    transform-origin: left;
}
#horizontal {
    transform: scaleX(.5);
}
#vertical {
    transform: scaleY(.5);
}

Figure 20-9 shows the result. The horizontally scaled text looks okay, but the vertically scaled text has jagged edges.

The scale() function accepts one or two arguments. If you pass it a single number, the same scaling factor is applied to both axes. If you pass it two numbers separated by a comma, the first is used as the scaling factor for the X axis and the second for the Y axis.

In scale_2.html, two 400px wide images are scaled to two-thirds of their normal size like this:

.scaleimg {
    /* Other styles omitted */
    transform: scale(0.66);
}

As Figure 20-10 shows, the images are reduced in size, but they still occupy their normal space, leaving a wide gap all around them. This happens even if you remove the width and height attributes from the <img> tags in the HTML markup.

You can’t use the scale() function if you want to remove the space around images that have been scaled down. Instead, you need to adjust the width and height attributes in the HTML. You can then use scale() to restore them to their normal size when hovered over. For example, in scale_3.html, the images have been resized in the HTML like this:

<img src = "images/nice_market.jpg" alt = "Flower market in Nice" width = "268" height = "178" ←
class = "scaleimg">
<img src = "images/nice_seafront.jpg" alt = "Nice seafront" width = "268" height = "178" ←
class = "scaleimg">

This removes the extraneous space, as shown in Figure 20-11.

The images are scaled up to their original size when hovered over, and to prevent them partially disappearing offscreen, the anchor points are set like this:

.scaleimg:first-child {
    transform-origin: left top;
}
.scaleimg:last-child {
    transform-origin: right top;
}
.scaleimg:hover {
    transform: scale(1.5);
}

As Figure 20-12 shows, the left image is restored to its full size when the mouse pointer is over it.

When you mouse away from the image, it returns to its reduced size. The change in size in both directions is instantaneous, which can be rather jarring. However, as you’ll learn later in this chapter, you can scale the image smoothly over a specified duration using a CSS transition.

Preventing Elements from Being Scaled on Touch Screens

The simple way to prevent elements from being scaled on touch screens is to test for the JavaScript ontouchstart event. If the event exists, you know that the page has been loaded into a touch-screen device. You can then use JavaScript to add an extra class name to the images and create a style rule that prevents them from being scaled.

This extra style rule has been added in scale_4.html:

.noscale.scaleimg:hover {
    transform: scale(1);
}

This sets the scale of elements with both the noscale and scaleimg classes to 1 when hovered over. In other words, the element remains unscaled.

Alternatively, if no other transform functions are being used, you could set the value to none:

.noscale.scaleimg:hover {
    transform: none;
}

At the foot of the page is the following script block:

<script>
if ('ontouchstart' in window) {
    function noScale(scale, noscale) {
        var images = document.getElementsByClassName(scale);
        for (var i = 0, len = images.length; i < len; i++) {
            images[i].className = scale + ' ' + noscale;
        }
    }
noScale('scaleimg', 'noscale'),}
</script>

The script begins by checking whether the ontouchstart event exists. If it doesn’t, the rest of the script is ignored. It then defines a function called noScale(), which takes two arguments. The first is the class name assigned to elements that are being scaled. The second is the class name you want to add to prevent scaling on touch screens. The last line of the script executes the function by passing the two class names to it.

If you want to use different class names, just change the arguments passed to the noScale() function.

On a touch-screen device, the images remain unscaled when tapped. But on all other devices that support CSS transforms, they’re scaled up and down on mouseover and mouseout.

Flipping Elements

Table 20-2 doesn’t contain a transform function to flip elements horizontally or vertically, but you can achieve the same effect by passing negative values to scaleX(), scaleY(), and scale(). Setting the value to -1 preserves the original size, but flips the element on the relevant axis. To demonstrate the effect, scale_5.html contains the following styles, which are applied to identical <div> elements:

#horizontal {
    transform: scaleX(-1);
}
#vertical {
    transform: scaleY(-1);
}
#shrinkflip {
    transform: scale(-.5);
}

The value of transform-origin is not set, so the elements are flipped around their center, producing the result in Figure 20-13. The final <div> is flipped and scaled down along both axes, which produces the same effect as scaling it down and rotating it 180°.

Skewing Elements

To skew an element, use the transform property and set its value by passing an angle as the argument to skewX() or skewY(). With skewX(), a positive angle skews the element to the left, and a negative angle skews it to the right. With skewY(), a positive angle skews the element vertically and rotates it in a clockwise direction. A negative angle rotates it in an anticlockwise direction.

The following example is in skew.html (see Figure 20-14):

#horizontal {
    transform: skewX(-30deg);
}
#vertical {
    transform: skewY(20deg);

}

As the angle increases toward 90°, the object becomes more and more distorted until it disappears completely at exactly 90°. At 180°, there is no distortion whatsoever.

Transforming Elements with the matrix() Function

The matrix() function specifies a 2D transform in the form of a transformation matrix (http://en.wikipedia.org/wiki/Transformation_matrix). The function requires six arguments, all of which are numbers separated by commas.

The last two arguments always specify the number of pixels you want to move (translate) the element along the horizontal and vertical axes, respectively. The first four arguments control other transforms.

In most cases, the first and fourth arguments are the scaling factors for the horizontal and vertical axes, respectively. The second argument usually controls the angle of vertical skew, while the third one controls horizontal skew. All four arguments are used in combination to rotate the element. What makes using the matrix() function complicated is the need to convert angles of skew and rotation using trigonometric functions.

img:last-child {
    transform: translate(-50px, 25px);
}

img:last-child {
    transform: matrix(1, 0, 0, 1, -50, 25);
}

.scaleimg:hover {
    transform: scale(1.5);
}
.noscale.scaleimg:hover {
    transform: scale(1);
}

.scaleimg:hover {
    transform: matrix(1.5, 0, 0, 1.5, 0, 0);
}
.noscale.scaleimg:hover {
    transform: matrix(1, 0, 0, 1, 0, 0);
}

#horizontal {
    transform: matrix(-1, 0, 0, 1, 0, 0);
}
#vertical {
    transform: matrix(1, 0, 0, -1, 0, 0);
}
#shrinkflip {
    transform: matrix(-.5, 0, 0, -.5, 0, 0);
}

#horizontal {
    transform: skewX(-30deg);
}

#horizontal {
    transform: matrix(1, 0, -.58, 1, 0, 0);
}

#vertical {
    transform: matrix(1, .27, 0, 1, 0, 0);
}

h1 {
    transform: translateY(215px) rotate(-.25turn);
    transform-origin: left top;
}

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

Choosing Which Properties to Animate

The transition-property property accepts the keyword all or a comma-separated list of properties you want to animate. Only those properties listed in Table 20-4 can be animated.

Unless you want to apply different transition effects to individual properties, it’s best to use the keyword all. Alternatively, you can omit transition-property altogether because all is the default value.

Specifying the Duration of the Transition

You specify the duration of the transition with the transition-duration property, which expects a single duration or comma-separated list of durations. Times can be set in seconds (s) or thousandths of a second (ms).

If you specify just one value, the same duration applies to all properties being transitioned. If you supply multiple durations, they’re applied to the properties in the same order as they’re listed in transition-property. In the following example, all transitions take half a second:

transition-property: color, width, height;
transition-duration: .5s;

However, in the next example, color changes over half a second, while width and height take a full second to transition to the next state.

transition-property: color, width, height;
transition-duration: .5s, 1s, 1s;

The number of values doesn’t need to match. If transition-duration has more values than transition-property, the excess durations are ignored. If there are fewer, the browser cycles through them again. Take the following example:

transition-property: left, width, top, height;
transition-duration: 2s, 1s;

In this case, there are only two values for transition-duration, so the transition of the left property takes two seconds, while width changes over one second. The browser then cycles through the durations again, using two seconds for top and one second for height. If you add another property to transition-property, the browser continues the cycle, and uses a two-second duration.

Setting the Pace of the Transition

The transition-timing-function property controls how intermediate values are calculated during the transition. The property accepts one or more of the following values as a comma-separated list:

• ease Starts slow, speeds up, and slows toward the end.
• linear Transitions at an even pace throughout.
• ease-in Starts slow and speeds up.
• ease-out Starts fast and slows toward the end.
• ease-in-out Similar to ease, but slower at each end.
• cubic-bezier() Specifies a custom transition using a cubic-bézier curve.
• step-start The change takes place at the beginning of the duration.
• step-end The change takes place at the end of the duration.
• steps() The change takes place in the specified number of equal steps.

As with transition-duration, a single value is applied to all transitions. If you specify multiple values as a comma-separated list, they’re applied in the same order to the individual properties listed in transition-property. Excess values are ignored, and if you specify fewer transition-timing-function values than properties, the browser cycles through them.

The first five keywords in the preceding list are constants for easing functions based on a cubic-bézier curve. If you’ve used Flash, you’ll be familiar with the concept of easing, which varies the pace of a transition (or tween, as it’s called in Flash). The cubic-bezier() function allows you to customize the pace. It takes four arguments like this:

cubic-bezier(x1, y1, x2, y2)

Both x1 and x2 must be in the range 0–1. The y1 and y2 values can exceed that range.

The steps() function takes two arguments: the number of discrete steps in the transition and the keyword start or end. If you omit the second argument, it defaults to end. To demonstrate how the function and the related step-start and step-end constants work, step.html has four identical <div> elements with a light gray background color. The :hover pseudo-class changes the background color to a very dark gray, as shown in Figure 20-15.

The page contains the following style rules:

div {
    /* Other styles omitted */
    background-color: #CCC;
    transition-duration: 5s;
}
div:hover {
    background-color: #333;
}
#steps1 {
    transition-timing-function: steps(5, start);
}
#steps2 {
    transition-timing-function: steps(5, end);
}
#steps3 {
    transition-timing-function: step-start;
}
#steps4 {
    transition-timing-function: step-end;
}

The transition-duration property is set to a deliberately long five seconds. The first two <div> elements use the steps() function to change the color in five discrete steps. However, the timing is affected by the second argument. The first <div> uses start, so the color immediately changes to the first intermediate shade. In the next <div>, the second argument is end. As a result, the color doesn’t change until the first second has passed.

The last two <div> elements use the step-start and step-end constants. The first changes color immediately on mouseover and mouseout. The last one doesn’t change unless the mouse pointer is held over it for the full five seconds. When you mouse away from the <div>, it doesn’t revert to light gray until five seconds have passed.

Delaying the Transition

By default, transitions start immediately, but you can use the transition-delay property to delay the whole or part of a transition. Like the other transition properties, it accepts a single time value or a comma-separated list of values. A single value applies to all properties being transitioned. A list of values is applied to properties in the same order as they’re listed in transition-property.

Delaying a property’s transition by the same amount as the previous property’s duration creates a sequence of changes. For example, the styles in transition-delay.html change the background color, width, and height of a box on hover like this:

#box1 {
    width: 100px;
    height: 100px;
    background-color: #F00;
    margin: 10px;
    transition-property: background-color, width, height;
    transition-duration: 1s;
    transition-delay: 0s, 1s, 2s;
}
#box1:hover {
    background-color: #006;
    width: 150px;
    height: 150px;
}

The #box1 style rule sets the duration for each transition to one second, but transition-delay has three values. As a result, the transition on background-color starts as soon as you hover over the box, and it takes one second to change from red to navy blue. The width transition is delayed by one second, so it waits until the color has finished changing before gradually making the box 50px wider. The height transition is delayed by two seconds, so it starts making the box taller only after the other transitions have completed. So, although transition-duration is 1s, the overall sequence takes three seconds.

Figure 20-16 shows the three phases of the transition. Notice that the top-left corner of the box remains fixed throughout each phase and that the text moves down when the box increases in height. Unlike the example in Figure 20-12, there’s no need to use the transform-origin property, and the text is not obscured. However, the browser needs to reflow the page layout continuously, which is more processor intensive than using the scale() transform function and could affect battery consumption on a mobile device.

When you move the mouse away at the end of the sequence, the delays are executed in the same order. First the color changes back to red, the width begins to shrink one second later, and finally the height is reduced.

The sequence is abandoned if you move the mouse away before the end, but the order of returning to the original state is the same as before. In other words, the color changes first, followed by the width.

The transition-duration property also accepts negative values. This starts the transition immediately, but as though it had already started at the specified offset. Take the following example:

transition-property: width;
transition-duration: 1s;
transition-delay: -500ms;

If the transition changes width from 100px to 200px, it starts at the point that would have been reached over half a second—in other words, about 150px (the actual value depends on the pace of the transition).

Changing the Reverse Transition

As the example in transition-delay.html in the preceding section demonstrates, transition delays are executed in the same order when the element returns to its normal state. In many cases, this is unlikely to cause a problem. But if you want to run a sequence of transitions in reverse, it’s quite easy to do.

All that’s needed is to define transition-delay in two places:

• The timings for the forward sequence go in the style rule that define the state after the transition, for example in the :hover pseudo-class.
• The timings for the reverse sequence go in the style rule that defines the element’s normal state.

The styles in reverse_sequence.html adapt the previous example like this:

#box1 {
    width: 100px;
    height: 100px;
    background-color: #F00;
    margin: 10px;
    transition-property: background-color, width, height;
    transition-duration: 1s;
    transition-delay: 2s, 1s, 0s;
}
#box1:hover {
    background-color: #006;
    width: 150px;
    height: 150px;
    transition-delay: 0s, 1s, 2s;
}

The original timings have been copied into the :hover pseudo-class, but they have been reversed in the #box1 style rule. When you hover over the box, the transition-delay timings in the pseudo-class override those in #box1. So, the sequence of transitions remains the same as before. However, when you move the mouse pointer away from the box, the :hover pseudo-class no longer applies, and the timings in the #box1 style take precedence. As a result, the height starts changing immediately, the width follows one second later, and finally the color fades to red.

Using the Shorthand Property

Instead of using the individual properties, you can define a transition in a single declaration with the transition shorthand property. For a single property, just list the values separated by spaces. For example, the following applies a one-second linear transition to background-color, delayed by a quarter of a second:

transition: background-color 1s 250ms linear;

When using the transition shorthand, the first time value is treated as transition-duration. The second one represents transition-delay. If you don’t want to delay the transition, use only one time value because the default value for transition-delay is 0s.

To apply the same transition values to all properties, just set the values you want to change from the initial values listed in Table 20-3. For example, if you want all properties to transition over half a second without a delay, this is all you need:

transition: 500ms;

Alternatively, if you want to make it clear that all properties are affected, include the all keyword:

transition: all 500ms;

In both cases, the default ease timing function will be used.

To apply different values to each property, use multiple shorthand definitions separated by commas. For example, the #box1 style in reverse_sequence.html can be rewritten like this (the code is in transition.html):

#box1 {
    width: 100px;
    height: 100px;
    background-color: #F00;
    margin: 10px;
    transition: background-color 1s 2s,
            width 1s 1s,
            height 1s;
}

This defines a one-second transition delayed by two seconds for background-color, a one-second transition delayed by one second for width, and a one-second transition executed immediately for height.

Creating a Rollover Image Without JavaScript

A rollover image reveals a different image when you hover over it. You can create a variation of this technique using a combination of CSS positioning, a transition, and the opacity property, which is described in the sidebar “Opacity and Alpha Transparency.”

#alpha {
    background: rgba(255,255,255, 0.3);
    border-color: rgba(217,79,17,0.3);
}
#opacity {
    opacity: .3;
}

Instead of swapping the image source with JavaScript, this technique relies on superimposing one image on top of another and using the opacity property and a transition to fade out the front image when hovered over. In fade_image.html, there are two images of the same size alongside each other inside a <div> like this:

<div id = "images">
    <img src = "images/nice_market.jpg" alt = "Flower market in Nice" width = "400" height = "266" ←
    class = "frontimg">
    <img src = "images/nice_seafront.jpg" alt = "Nice seafront" width = "400" height = "266">
</div>

The first image is assigned the class frontimg, which has the following styles:

.frontimg {
    position: absolute;
    transition: opacity 500ms linear;
    opacity: 1;
}
.frontimg:hover {
    opacity: 0;
}

The class makes the image absolutely positioned. As explained in Chapter 11, absolute positioning removes an element from the document flow and floats it on a separate layer in front of the normal content. If you don’t set any offsets, the element occupies the same position as it would in the normal flow. As a result, the second image is hidden behind the first one. They have the same dimensions, so the rest of the page is unaffected.

The other properties create a half-second linear transition and set the normal opacity to 1 (fully opaque). The :hover pseudo-class changes the level of opacity to 0 (fully transparent).

When you hover over the image, it fades to reveal the other image underneath (see Figure 20-18). Although you can’t see the front image after the fade, it’s still there, so you’re still hovering over it until you move the mouse pointer away. Then the front image fades back.

Sliding an Image Out of View

A simple variation on the technique in the previous section uses the translateX() transform function to move the front image far enough to the left to hide it offscreen. The styles in slide_image.html look like this:

.frontimg {
    position: absolute;
    transition: 1s linear;
}
.frontimg:hover {
    transform: translateX(-442px);
}

This creates a linear transition to slide the front image to the left over one second, revealing the other image behind it (see Figure 20-19).

Summary

CSS transforms and transitions break up the angular and static layout of web pages by moving, rotating, scaling, and skewing elements, and creating a smooth transition from one state to another. In this chapter, I used the :hover pseudo-class to trigger transitions, but you can also use JavaScript to add and remove a class to change an element’s properties. If you have defined a transition in a style that governs the element’s normal state, the browser will transition smoothly between the start and end values.

In the next chapter, we’ll look at more complex animations using CSS keyframes.