Figure 1-7 Simple radial gradient To create a circular gradient, pass in the circle parameter: -webkit-radial-gradient(circle, white, black). Using Gradients Creating Radial Gradients 2012-07-23 | © 2012 Apple Inc. All Rights Reserved. 17The circle parameter parameter causes the gradient to be circular, instead of an ellipse that conforms to the shape of the element, as Figure 1-8 illustrates: Figure 1-8 Circular gradient Note that the shape of an element clips a circular gradient just as it does an elliptical gradient. Moving the Center By default, the starting point of a radial gradient isthe center of the element you are filling. Change this behavior by specifying a different starting point, using horizontal or vertical offsets from the element’s top left corner. The following example creates a circular div element (a square div element with a 50% border radius), then fills it with a radial gradient whose center is offset down and to the right of the element’s upper-left corner by 30%, creating a 3D lighting effect, as Figure 1-9 illustrates:

Figure 1-9 3D lighting effect Notice that you specify the vertical and horizontal offsets are as a distance from the top and left edge of the element, and that you specify both offsets as part of a single comma-delimited parameter, separated by a space. If you specify only a single value, Safari treats it as a vertical offset. Changing the Ending Color Location By default, a gradient reaches its ending color at the corner of the element furthest from the specified center of the gradient. Modify this behavior by specifying closest-corner. For example: -webkit-radial-gradient(30% 10%, closest-corner, white, black) creates a radial gradient that begins 30% to the right and 10% below the upper-left corner of an element, and reaches its end color at the closest corner. If you specify both the circle and the closest-corner properties, passthem in the same comma-delimited parameter, separated by a space: -webkit-radial-gradient(30% 10%, circle closest-corner, white, black) Using Gradients Creating Radial Gradients 2012-07-23 | © 2012 Apple Inc. All Rights Reserved. 19When the gradient ends at the closest corner, the ending color fills the remainder of the element. Figure 1-10 shows examples of identical div elements filled with radial gradients offset 30% down and to the right of the upper-left corner. Elliptical gradients are on the left of the illustration and circular gradients are on the right. Closest-corner gradient fills are above and default gradient fills are below: Figure 1-10 Closest-corner gradient fills Adding Color Stops To create a multi-colored radial gradient, specify intermediate colors between the starting and ending color. For example, the following snippet creates a radial gradient that blends from white at the center to green half way out, to black at the outer edge, as Figure 1-11 illustrates:

Figure 1-11 Multicolor gradient By default, the rate of color change is constant, dividing the gradient into equal-size color blends. Modify this behavior by providing color stops that specify the distance from the gradient center to its edge for particular colors. For example, the following snippet creates a gradient that blends from white to red in just 20% of the gradient, then takes the remaining 80% to fade to black, as Figure 1-12 illustrates:

Figure 1-12 Red color stop at 20% Using Gradients Creating Radial Gradients 2012-07-23 | © 2012 Apple Inc. All Rights Reserved. 21Specify paired color stops of the same color to create bands of solid color, or specify pairs of color stops with different colors at the same percentage point to create abrupt color changes. The following snippet defines two radial gradients, one with two color stops of the same color and the other with two differently colored stops at the same percentage point. Figure 1-13 shows the result: background: -webkit-radial-gradient(white, red 10%, red 90%, black); background: -webkit-radial-gradient(white, yellow 20%, red 20%, black); Figure 1-13 Color band and abrupt color change using color stops Creating a Radial Fade If you use RGBa colors in your color stops, you can specify both the hue and transparency of the gradient at any point. This enables you to create a gradient that blends into the background of its parent element. For example, Listing 1-2 creates a spotlight effect by fading a div element’s background from white to transparent, allowing the parent div’s background to gradually show through. Figure 1-14 shows the result: Listing 1-2 Radial fade

rgba gradient

Spotlight On: Gradients

Using RGBA Colors

A radial gradient using rgba colors can be used to create a spotlight effect.

Figure 1-14 Spotlight gradient Creating Repeating Gradients You can create a repeating pattern in a gradient in two different ways. One way isto specify a series of repeating color stops. For example, the following snippet creates linear and radial gradients with two repeating red-to-blue-to-red blend stripes: -webkit-linear-gradient(red, blue 25%, red 50%, blue 75%, red) -webkit-radial-gradient(red, blue 25%, red 50%, blue 75%, red) It’s tedious to specify the color stops repeatedly when there are many repetitions, particularly if you need to calculate cumulative percentages for each color stop. To simplify the process, use the repeating gradient properties: -webkit-repeating-linear-gradient and -webkit-repeating-radial-gradient. To create a repeating gradient, specify the first set of color stops with percentages; the gradient repeats the pattern of colorstops, keeping the percentages proportional, as needed to reach 100%. The syntax for repeating Using Gradients Creating Repeating Gradients 2012-07-23 | © 2012 Apple Inc. All Rights Reserved. 23gradients is otherwise identical to nonrepeating gradients. The following snippet specifies color stops that fill 20% of two gradients, which createslinear and radial gradients with five repeating plum-to-powderblue-to-plum blend stripes, as Figure 1-15 illustrates. -webkit-repeating-linear-gradient(plum, powderblue 10%, plum 20%) -webkit-repeating-radial-gradient(plum, powderblue 10%, plum 20%) Figure 1-15 Repeating gradient patterns Note that the color pattern repeats from the starting color, so if the last color specified is the same as the starting color, the pattern repeats smoothly. If you specify a pattern whose last entry is different from the first entry, the color changes abruptly from the last color to the first color when the pattern repeats, instead of blending smoothly. Using a Gradient as a Border Image You can use a gradient anywhere you can use an image—as you would expect, this means you can use a gradient as a border image. However, the syntax is nonobvious. The border-image property uses four values to specify offsets for slicing the image into the top, bottom, and sides of the border. Since a gradient has no inherent size, a pixel or percentage offset into the image is meaningless; the only useful value is 100%. To make tiles from a linear gradient so that the border edges have the same color everywhere the tiles meet, start and end the gradient with the same color. For example, the following snippet creates a border like the one that Figure 1-16 shows.

Figure 1-16 Linear gradient border Radial gradients work nicely as borders, because the outer edges of all the tiles typically match when the stretch value is used for the repeat parameter. Here is an example of a radial gradient used as a border image:

Using Gradients Using a Gradient as a Border Image 2012-07-23 | © 2012 Apple Inc. All Rights Reserved. 25Figure 1-17 shows the result. Figure 1-17 Radial gradient border Prior Syntax (-webkit-gradient) The -webkit-linear-gradient and -webkit-radial-gradient properties are supported in iOS 5.0 and later, and in Safari 5.1 and later on the desktop. In prior versions of Safari, both linear and radial gradients were implemented using the -webkit-gradient property. If you need to support earlier versions of iOS or Safari, use the -webkit-gradient property to create gradients. The syntax is as follows: Specify linear gradients using the keyword linear, followed by a starting point, an ending point, a starting color with the keyword from, any color stops, and an ending color with the keyword to. ● Linear gradient, vertical from top: -webkit-gradient(linear, center top, center bottom, from(white), to(black)) ● Linear gradient, horizontal from left: -webkit-gradient(linear, center left, center right, from(white), to(black)) ● Linear gradient, diagonal from upper left: -webkit-gradient(linear, upper left, lower right, from(white), to(black)) ● Linear gradient, rainbow: Using Gradients Prior Syntax (-webkit-gradient) 2012-07-23 | © 2012 Apple Inc. All Rights Reserved. 26-webkit-gradient(linear, center left, center right, from(yellow), color-stop(20%, orange), color-stop(40%, red), color-stop(60%, green), color-stop(80%, blue), to(purple)) Specify radial gradients using the keyword radial, followed by a starting point, a starting radius, an ending point, an ending radius, a starting color, any color stops, and an ending color. ● Radial gradient, centered: -webkit-gradient(radial, center center, 0px, center center, 100%, from(white), to(black)) ● Radial gradient, offset: -webkit-gradient(radial, 20% 20%, 0px, 20% 20%, 60px, from(white), to(black)) ● Radial gradient, rainbow: -webkit-gradient(radial, center center, 0px, center center, 100%, from(yellow), color-stop(20%, orange), color-stop(40%, red), color-stop(60%, green), color-stop(80%, blue), to(purple)) The beginning radius specifies the size of the disk at the center of the gradient. The ending radius specifies the size of the disk at the end of the gradient. The gradient is circular if the beginning and ending center points are the same, elliptical otherwise. The gradient is clipped by the shape of the containing element if the ending radius specifies a larger disk than the element can contain. Using Gradients Prior Syntax (-webkit-gradient) 2012-07-23 | © 2012 Apple Inc. All Rights Reserved. 27A mask is a two-dimensional shape that acts as an overlay on an element and clips the element visually or renders portions of the element transparent or translucent. A mask consists of an image or a gradient that contains an alpha channel; where the alpha value of the mask is 0, the underlying element is transparent, or masked out; where the alpha value is 1, the underlying element displays normally; where the alpha value is between 0 and 1, the underlying element is proportionally transparent. Only the alpha values of the mask are used; any other color values are ignored. An element’s mask applies to its children and their descendants. The children and descendants may also have masks, in which case the masks are stacked. The transparent areas of a masked element reveal the underlying webpage contents, which may also contain masked elements; these masks too are stacked. The final image is rendered after concatenating all the masks in the stack, tiling and stretching them as specified. When a mask is applied to an element, both the contents and background of the element are masked. A mask may be applied to the entire element or it may exclude either the border or the combined border and padding. Using an Image as a Mask To apply a mask using an image, first create a .png or .svg image that contains an alpha channel. Pass the URL of thisimage into either the -webkit-mask-image property or the -webkit-mask-box-image property. The -webkit-mask-image property usesthe native size of the mask image. The -webkit-mask-box-image property scales the mask image to meet the edges of the element. If the image used as a mask consists of an opaque shape on a transparent background, the mask acts as a “cookie cutter” to clip an element in the shape of the mask. For example, the following snippet applies a heart-shaped mask to an image. Figure 2-1 shows the result. 2012-07-23 | © 2012 Apple Inc. All Rights Reserved. 28 Using Masks

Figure 2-1 Heart-shaped “cookie-cutter” The -webkit-mask-box-image property takes optional arguments that work like the -webkit-border-image parameters. You can specify offsets into the mask image to slice it into top, right, bottom, and left images, applying the mask slices, stretched or repeated, to the edges of an element. For example, the following snippet uses a 50-pixel heart-shaped mask and adds a 50-pixel border to the image. The snippet also adds parameters to the -webkit-mask-box-image property, setting the slice size to the whole mask image and specifying repeat both horizontally and vertically. Figure 2-2 shows the result.

Figure 2-2 Masking a border As mentioned previously, you can mask any HTML element, and you can concatenate masks by inheritance and by stacking masked elements. For example, Listing 2-1 creates a pair of masked div elements, each of which contains a paragraph element. The example positions the second div element so that it partly overlaps the first div element. The paragraph elements are masked by their parent div elements, and the two masks are stacked. The result is shown in Figure 2-3. Listing 2-1 Stacking masked elements

stacked masks

This div element has a heart-shaped mask.This div element has a heart-shaped mask.This div element has a heart-shaped mask.This div element has a heart-shaped mask.This div element Using Masks Using an Image as a Mask 2012-07-23 | © 2012 Apple Inc. All Rights Reserved. 30has a heart-shaped mask.This div element has a heart-shaped mask.This div element has a heartshaped mask.This div element has a heart-shaped mask.

This div element has a heart-shaped mask.This div element has a heart-shaped mask.This div element has a heart-shaped mask.This div element has a heart-shaped mask.This div element has a heart-shaped mask.This div element has a heart-shaped mask.This div element has a heartshaped mask.This div element has a heart-shaped mask.

Figure 2-3 Stacking masks Using Masks Using an Image as a Mask 2012-07-23 | © 2012 Apple Inc. All Rights Reserved. 31You can use a mask to fade an element gradually into the background by including semitransparent pixels in the mask. For example, the following snippet applies a mask image with a solid center and increasingly transparent edges to the image of a field. The -webkit-mask-box-image property is used, so the mask is scaled to fit the img element. The result is shown in Figure 2-4.

Figure 2-4 Applying a mask with a fuzzy border Image Mask Result Using a Gradient as a Mask Because gradients can be used in place of any image, a gradient can be passed as a mask. The following snippet defines a gradient that goes from opaque to transparent as a mask for an img element. The result is shown in Figure 2-5.

Figure 2-5 Result of applying a gradient mask Note: The gradient in the example uses black asthe opaque color, but any completely opaque color would be equivalent. The example just given goesfrom opaque to transparent over the height of the image, but you can use different gradient parameters to achieve different effects. The following snippet creates a gradient from left to right and uses color stops to fade an image sharply at the edges, as shown in Figure 2-6. Notice that the image’s border radius works in concert with the mask.

Figure 2-6 Horizontal gradient mask with color stops You can apply a gradient mask to any HTML element, not just images. For example, the following snippet creates a radial gradient as a mask for a div element containing several paragraphs of text. The result is shown in Figure 2-7.

Figure 2-7 Masking text with a radial gradient For more about gradients, see “Using Gradients” (page 12). Working with WebKit Mask Properties You can use either the -webkit-mask-image or the -webkit-mask-box-image property to assign a mask to an element. The -webkit-mask-box-image property scales the mask to fit the element by default, while the -webkit-mask-image property uses the mask image’s native size. Note: Gradients do not have a native size, so when using a gradient as a mask, the mask is always scaled to fit the mask bounding area (by default, the same as the masked element’s bounding area). The -webkit-mask-box-image property accepts optional parameters that enable it to act like a border image (for details, see Figure 2-5 (page 33)). There is also a set of propertiesthat you can use to modify the behavior of the -webkit-mask-image property, including: ● -webkit-mask-clip—Causes the mask to apply to the whole element, only the padding and content, or only the content. Set to border-box (default), padding-box, or content-box. Using Masks Working with WebKit Mask Properties 2012-07-23 | © 2012 Apple Inc. All Rights Reserved. 35● -webkit-mask-origin—Sets the origin of the mask to the upper left corner of the element’s border, padding, or content box. Set to border (default), padding, or content. ● -webkit-mask-position—Anchors the upper-left corner of the mask at the specified offset from the origin. Accepts an x-offset and a y-offset. ● -webkit-mask-repeat—Controls how the mask is tiled to cover the element. Accepts an x-repeat and a y-repeat parameter. Both parameters can be set to repeat, space, round, or no-repeat. The specifics are the same asfor the background-repeat property (see http://www.w3.org/TR/css3-background/#thebackground-repeat). ● -webkit-mask-size—Controls how the mask is sized to cover the element. The specifics are the same as for the background-size property (see http://www.w3.org/TR/css3-background/#the-backgroundsize). The properties that apply to webkit-mask-image are analogous to the CSS3 background properties. See http://www.w3.org/TR/css3-background/#backgrounds for details. Using Masks Working with WebKit Mask Properties 2012-07-23 | © 2012 Apple Inc. All Rights Reserved. 36A reflection is a mirror image, optionally with its own mask. You can add a reflection to any visible HTML element. Reflections update automatically as the element’s appearance changes. If you hover over a link with a reflection, for example, you see the hover effect in the reflection. If you add a reflection to a video element, the video plays in the reflection as well. Resize the element and the reflection is resized. Reflections are not interactive elements, however—clicking or touching a reflection does not generate any events. Reflections have no effect on layout other than being part of a container’s overflow, and are similar to box shadows in this respect. In other words, you must position elements explicitly to allow space for reflections; if you add a reflection below an image, and follow the image with a paragraph of text, the reflection may cover the text (depending on the size of the image, padding, margins, and so on). Adding a Reflection Use the -webkit-box-reflect property to add a reflection to an element. The first, mandatory, parameter is the direction in which the reflection projects, which can be above, below, left, or right. For example, the following snippet adds a reflection below an h1 element, as Figure 3-1 illustrates:

Reflection in Blue 2012-07-23 | © 2012 Apple Inc. All Rights Reserved. 37 Using Reflections

Figure 3-1 Reflection below a heading The reflection is the same visible size as the element. The element border and padding are included in the reflection. Adjusting the Reflection’s Position The first argument of the -webkit-box-reflect property specifiesthe direction of the reflection. An optional second argument specifies the offset or space between the original image and the reflection. By default, the reflection begins with no separation from the element’s bounding box. To change this behavior, add an offset parameter. A positive offset causes the reflection to be separated from the element by additional space; a negative offset causes the reflection to overlap the element. For example, the bounding box of an h1 element includes substantial white space; to tuck the reflection in closer to the text, add a negative offset. The following example adds an offset of -15px to the reflection. The result is shown in Figure 3-1: Using Reflections Adjusting the Reflection’s Position 2012-07-23 | © 2012 Apple Inc. All Rights Reserved. 38

Figure 3-2 Reflection with negative offset Masking a Reflection An optional third argument to -webkit-box-reflect specifies a mask to apply to the reflection. A mask renders part of the reflection transparent or translucent. The mask is either an image file, specified as a URL, or a gradient. A mask image file can be a .png, an .svg, or a .gif with transparent areas. The alpha value of the mask is applied to the reflection on a pixel-by-pixel basis. Only the alpha value of the mask’s color values has any effect on the reflection. When creating a mask, shape it to mask the target element itself, not to mask the reflection. The reflection shows a mirror image of the masked element, even though the element does not appear masked. The following snippet adds a mask image to a reflection. Figure 3-3 shows the resulting masked reflection side-by-side with the mask image. Using Reflections Masking a Reflection 2012-07-23 | © 2012 Apple Inc. All Rights Reserved. 39style="-webkit-box-reflect: below 0px url(mask.png);" Figure 3-3 Reflection with image as mask The following snippet adds a reflection below an image, using a gradient as a mask. Figure 3-4 shows the result. Figure 3-4 Image with reflection and gradient mask Note that the reflection includes the rounded borders of the img element. Notice also that the gradient goes from transparent at the top to opaque at the bottom—the opposite of its appearance in the reflection; this is because the reflection shows a mirror image of the masked element. For more about masks, see “Using Masks” (page 28); for more about gradients, see “Using Gradients” (page 12). Inner Reflections When you reflect an element, all of the element’s descendants are displayed in the reflection. If you add a reflection to a child element, the child’sreflection isrendered first; thisinner reflection isincluded in the parent element’s reflection. The following snippet adds a reflection to a div element containing an img element that has its own reflection. Figure 3-5 shows the result:
Using Reflections Inner Reflections 2012-07-23 | © 2012 Apple Inc. All Rights Reserved. 41

Text...
Text...
Figure 3-5 Inner reflection, reflected Using Reflections Inner Reflections 2012-07-23 | © 2012 Apple Inc. All Rights Reserved. 42Safari 6 and later supports CSS filters, or special visual effects, that you can apply to many elements, including videos (see Figure 4-1 (page 43)). These hardware-accelerated filters (such as brightness, contrast, saturation, and blur) can be stacked on top of and animated against one another. Read “CSS Property Functions” in Safari CSS Reference to find out more about CSS filters. Figure 4-1 CSS filters on a video Using CSS Filters To add a CSS filter to an HTML element, include the -webkit-filter property in the element’s CSS declaration, as shown in Listing 4-1 (page 44). You can list as many of the functions found in “CSS Property Functions” in Safari CSS Reference as you’d like. 2012-07-23 | © 2012 Apple Inc. All Rights Reserved. 43 Using CSS FiltersListing 4-1 Applying CSS filters to HTML elements

Filters

Video with and without CSS filters

The video on the left does not have CSS filters applied, while the video on the right does.

These videos are playing from the same source file.

Using CSS Filters 2012-07-23 | © 2012 Apple Inc. All Rights Reserved. 44You can create animations entirely in CSS, with no need for plug-ins, graphics libraries, or elaborate JavaScript programs. Normally, when the value of a CSS property changes, the affected elements are re-rendered immediately using the new property value. If you set CSS transition properties, however, any changes in the values of the specified CSS properties are automatically rendered as animations. This kind of automatic animation is called a transition. You trigger a transition simply by changing any of the specified CSS values. CSS property values can be changed by a pseudoclass, such as :hover, or by using JavaScript to change an element’s class name or to change its individual CSS properties explicitly. The animation flows smoothly from the original state to the changed state using a transition timing function over a specified duration. For more complex animationsthat can use arbitrary intermediate states and trigger conditions,see “Animating With Keyframes” (page 50). Transitions are especially powerful if you combine them with 2D and 3D transforms. For example, Figure 5-1 shows the results of applying an animated transition to an element as it rotates in 3D. See the CardFlip sample code project for the complete source code for this example. Figure 5-1 Card Flip example See the HTML version of this document to view the video. document to view the video. Animated transitions are a W3C draft specification: http://www.w3.org/TR/css3-transitions/. 2012-07-23 | © 2012 Apple Inc. All Rights Reserved. 45 Animating CSS TransitionsNote: Not all CSS properties are animatable. In general, any CSS property that accepts values that are numbers, lengths, percentages, or colorsis animatable. Some CSS propertiesthat accept discrete values can be animated as well, but display a jump between values rather than a smooth transition when changed, such as the visibility property. See Safari CSS Reference for which properties are animatable. Setting Transition Properties To create an animated transition, first specify which CSS properties should be animated, using the -webkit-transition-property property, a CSS property that takes other CSS properties as arguments. Set the duration of the animation using the -webkit-transition-duration property. For example, Listing 5-1 creates a div element that fades out slowly over 2 seconds when clicked. Listing 5-1 Setting transition properties

Click me and I fade away. . .

There are two special transition properties: all and none: ● -webkit-transition-property: all; ● -webkit-transition-property: none; Setting the transition property to all causes all changes in CSS properties to be animated for that element. Setting the transition property to none cancels transition animation effects for that element. To set up an animation for multiple properties, pass multiple comma-separated parameters to -webkit-transition-property and -webkit-transition-duration. The order of the parameters determines which transition the settings apply to. For example, Listing 5-2 defines a two-second -background-color transition and a four-second opacity transition. Animating CSS Transitions Setting Transition Properties 2012-07-23 | © 2012 Apple Inc. All Rights Reserved. 46Listing 5-2 Creating multiple transitions at once div.zoom-fade { -webkit-transition-property: background-color, opacity; -webkit-transition-duration: 2s, 4s; } Using Timing Functions Timing functions allow a transition to change speed over its duration. Set a timing function using the -webkit-transition-timing-function property. Choose one of the prebuilt timing functions—ease, ease-in, ease-out, or ease-in-out—or specify cubic-bezier and pass in control parameters to create your own timing function. For example, the following snippet defines a 1-second transition when opacity changes, using the ease-in timing function, which starts slowly and then speeds up: style="-webkit-transition-property: opacity; -webkit-transition-duration: 1s; -webkit-timing-function: ease-in;" Using the cubic-bezier timing function, you can, for example, define a timing function thatstarts outslowly, speeds up, and slows down at the end. The timing function is specified using a cubic Bezier curve, which is defined by four control points, as Figure 5-2 illustrates. The first and last control points are always set to (0,0) and (1,1), so you specify the two in-between control points. The points are specified using x,y coordinates, with x expressed as a fraction of the overall duration and y expressed as a fraction of the overall change. Figure 5-2 Cubic Bezier timing function Fraction of elapsed time Fraction of change 0, 0 1.0,1.0 0.9, 0.4 0.5, 0.2 0.5 0.0 1.0 0.0 0.5 1.0 Animating CSS Transitions Using Timing Functions 2012-07-23 | © 2012 Apple Inc. All Rights Reserved. 47For example, Listing 5-3 creates a 2-second animation when the opacity property changes, using a custom Bezier path. Listing 5-3 Defining a custom timing function div.zoom-fade { -webkit-transition-property: opacity; -webkit-transition-duration: 2s; -webkit-transition-timing-function: cubic-bezier(0.5, 0.2, 0.9, 0.4); } In the example just given, the custom timing function starts very slowly, completing only 20% of the change after 50% of the duration, and 40% of the change after 90% of the duration. The animation then finishesswiftly, completing the remaining 60% of the change in the remaining 10% of the duration. Delaying the Start By default, a transition animation begins as soon as one of the specified CSS properties changes. To specify a delay between the time a transition property is changed and the time the animation begins, use the -webkit-transition-delay property. For example, the following snippet defines an animation that beings 100ms after a property changes: .delay-fade { -webkit-transition-property: opacity; -webkit-transition-duration: 1s; -webkit-transition-delay: 100ms; } Setting Several Transition Properties At Once You can set an animation’s transition properties, duration, timing function, and delay using a single shorthand property: -webkit-transition. For example, the following snippet uses the :HOVER pseudostyle to cause img elements to fade in and out when hovered over, using a one-second animation that begins 100 ms after the hover begins or ends, and using the ease-out timing function: Handling Intermediate States and Events When applying a transition to an element’s property, the change animates smoothly from the old value to the new value and the property values are recomputed over time. Consequently, getting the value of a property during a transition may return an intermediate value that is the current animated value, not the old or new value. For example, suppose you define a transition for the left and background-color properties and then set both property values of an element at the same time. The element’s old position and color transition to the new position and color over time as illustrated in Figure 5-3. Querying the properties in the middle of the transition returns an intermediate location and color for the element. Figure 5-3 Transition of two properties Starting appearance Time = 0.0 sec Intermediate appearance Time = 0.5 sec Final appearance Time = 1.0 sec To determine when a transition completes, set a JavaScript event listener function for the DOM event that is sent at the end of a transition. The event is an instance of WebKitTransitionEvent, and its type is webkitTransitionEnd. For example, the snippet in Listing 5-4 displays an alert panel whenever a transition ends. Listing 5-4 Detecting transition end events document.body.addEventListener( 'webkitTransitionEnd', function(event) { alert( "Finished transition!" ); }, false ); Animating CSS Transitions Handling Intermediate States and Events 2012-07-23 | © 2012 Apple Inc. All Rights Reserved. 49Safarisupportstwo types of CSS animation: transition animations and keyframe animations. To simply animate changesin CSS properties whenever those properties change, you should probably use an animated transition (see “Animating CSS Transitions” (page 45)). To create complex animations—such as a bumblebee’s flight or a change that starts and stops or repeats indefinitely—or to trigger animations under arbitrary conditions using JavaScript, use keyframe animations. Keyframe animations include the following features: ● Choose any number of CSS properties to change and define points along a timeline that have specific states. ● Animation between two defined points is automatic but can be guided by specifying a timing function. ● You trigger keyframe animations explicitly. ● Keyframe animations can be set to repeat a finite number of times or to repeat indefinitely, proceeding in the same direction each time, or alternating forward and backward. ● Keyframe animations can be paused and resumed. ● All of the elements in a class can be animated as part of a single animation. When a keyframe animation completes, an animated element returns to its original CSS style. You can override this behavior, however, and make the final animation state persistent. You can also change an element’s style when the animation ends by installing a JavaScript listener function for the webkitAnimationEnd event. Create stunning effects by combining animation with 2D and 3D transforms. For example, Figure 6-1 shows an animation of text elements in 3D space. See the PosterCircle sample code project for the complete source code for this example. Figure 6-1 Animated text elements See the HTML version of this document to view the video. document to view the video. 2012-07-23 | © 2012 Apple Inc. All Rights Reserved. 50 Animating With KeyframesKeyframe animation is a W3C draft. See http://dev.w3.org/csswg/css3-animations/. Creating a Keyframe Animation A keyframe animation has—at minimum—a name, a duration, and one or more keyframes. A keyframe is a CSS rule consisting of a set of properties and values associated with a point in time. To create a keyframe animation, perform the following steps: 1. Create a named set of keyframes in CSS using the @-webkit-keyframes rule. The set must include at least one keyframe. 2. Set the -webkit-animation-duration property to a positive, nonzero value. 3. Set the -webkit-animation-name property to the name of the set of keyframes. The following example defines a single keyframe in a set named glow. The keyframe specifies a blue background color. The example definesthe div:hover pseudoclass as having the animation name glow and the animation duration of 1s. When the user hovers over or touches any div element, it turns blue for one second. Listing 6-1 Simple keyframe animation

Blue Glow

Hover turns me briefly blue.

Me too.

animated div

Click to slide right and down, then back.

Controlling Animation Using JavaScript Control a CSS animation using JavaScript either by changing an element’s className property or by changing an element’s animation style properties individually. One thing to remember is that the JavaScript name for a property is not always the same as the CSS name. Compound names in CSS typically contain dashes, but in Animating With Keyframes Controlling Animation Using JavaScript 2012-07-23 | © 2012 Apple Inc. All Rights Reserved. 56JavaScript the dash is the subtraction operator, so JavaScript names omit the dash. Compound names in JavaScript usually capitalize the first character of each word after the first word; so if a CSS name were -extension-foo-bar, the JavaScript name would usually be extensionFooBar. As an example, to set the CSS property -webkit-animation-play-state from JavaScript,set the element’s style.webkitAnimationPlayState property. Listing 6-4 creates three buttons and a round div element with a radial gradient background. The first button animates the div element by changing its class name. The second and third buttons pause and continue the animation by setting the div element’s style.webkitAnimationPlayState property. Figure 6-3 illustrates the result. Listing 6-4 Pausing and continuing an animation

Figure 6-3 JavaScript control of animation Handling Animation Events Three animation-related events are available through the DOM event system: Animating With Keyframes Handling Animation Events 2012-07-23 | © 2012 Apple Inc. All Rights Reserved. 58● webkitAnimationStart—Sent when the animation begins (after any specified delay). ● webkitAnimationIteration—Sent at the end of each iteration. ● webkitAnimationEnd—Sent after the final iteration. Note that when the final iteration in a series completes, it triggers both a webkitAnimationIteration and a webkitAnimationEnd event. Each of these events has three significant properties: ● The event.target property is the object being animated. ● The event.animationName property is the name of the animation that generated the event. ● The event.elapsedTime property is the length of time the animation has been running. Elapsed time does not include any time the animation was in the paused play state, nor does it include any specified delay time. As an example of event handling, Listing 6-5 creates three colored balls (round div elements) that roll away and disappear when clicked. The balls are given a class name that includes animation but begins with the animation play state set to paused; an onclick handler in each ball sets the play state for that element to running. The example adds an event listener for webkitAnimationEnd events on the body element. When a webkitAnimationEnd event occurs, the listener function removes the animated element by changing the element’s style.display property to none. Listing 6-5 Handling animation events

rolling divs Click the colored balls to make them roll away:

Note: To see the example in action, copy the listing into a text editor and save it with the .html file extension. Animating With Keyframes Handling Animation Events 2012-07-23 | © 2012 Apple Inc. All Rights Reserved. 60Use CSS transform propertiesto give webpages a rich visual appearance without needing image files. Elements can be positioned, rotated, and scaled in 2D and 3D space; perspective can also be applied, giving elements the appearance of depth. For example, Figure 7-1 shows a simple HTML document, containing only div elements and text but rendered using CSS transform and gradient properties. It appears to be a graphics-intensive page, yet the actual content is less than 2 KB of text, and the elements animate smoothly in 3D under user control. Figure 7-1 HTML page with rotation and perspective transforms 2012-07-23 | © 2012 Apple Inc. All Rights Reserved. 61 Using 2D and 3D TransformsHow does this work? HTML elements are, after all, inherently two-dimensional, or planar; they have height and width, but no thickness. By rotating planar elements into the third dimension and applying perspective, however, these elements can be combined to create apparently solid objects. For example, five div elements are combined in Figure 7-1 to form the sides and bottom of an open box; the ball inside the box is another div element with rounded borders—a radial gradient gives it the appearance of depth. Safari uses a series of transformation matrices to determine the mapping of every pixel on the screen. You don’t need to understand matrices to use them, however. You can apply a transform either by using a matrix or by calling one of the transform functions, such as scale() or rotate(). Transforming an element typically causes its image to be rendered in a different position on the screen, but the position and dimensions of the element on the page are not changed—the top, left, height, and width properties, for example, are not altered by transforms. It isthe coordinate system in which the element is drawn that is changed. Consequently, changing transform properties does not affect the layout of a webpage. This means that transforming an element can cause it to visually overlap neighboring elements, even though their positions and dimensions on the page may not overlap. Note: Mouse and touch events, such as onclick, track the visual representation of an element, taking 2D and 3D transforms into account. By default, transforms are applied using the center point of an element as the origin; rotation spins an object about its center, for example, and scaling expands or contracts an element from the center point. You can change the origin by setting the -webkit-transform-origin property. A transform can cause part of an element to be displayed in the element’s overflow area. If the value of the overflow property is scroll or auto, scroll bars appear as needed if a transform renders part of an object outside the display area. Safari supports both 2D and 3D transforms. Both 2D and 3D transforms are W3C drafts. See http://www.w3.org/TR/css3-2d-transforms/ and http://www.w3.org/TR/css3-3d-transforms/ for the specifications. 2D Transform Functions To apply a 2D transform to an element, use the -webkit-transform property. The transform property can be set using predefined transform functions—translation, rotation, and scaling—or it can be set using a matrix. Using 2D and 3D Transforms 2D Transform Functions 2012-07-23 | © 2012 Apple Inc. All Rights Reserved. 622D Translation 2D translation shifts the contents of an element by a horizontal or vertical offset without changing the top or left properties. The element’s position in the page layout is not changed, but the content is shifted and a shifted coordinate system applies to all descendants of the translated element. For example, if a div element is positioned at the point 10,10 using the CSS properties top and left, and the element is then translated 100 pixels to the right, the element’s content is drawn at 110,10. If a child of that div is positioned absolutely at the point 0,100, the child is also shifted to the right and is drawn at the point 110,110; the specified position of 0,100 is shifted right by 100, and the child is drawn at 100,100 relative to the parent’s upper-left corner, which is still at 10,10. Figure 7-2 illustrates this example. Figure 7-2 A translated element and its offspring To apply a 2D translation, set the -webkit-transform property to translateX(offset), translateY(offset), or both. For example:

2D Rotation 2D rotation is a rotation in the xy plane. By default, 2D rotation spins an object around its center point. To rotate an element around a different point,see “Changing the Origin” (page 67). Rotation isspecified in degrees clockwise from the element’s orientation after any inherited rotation; rotation affects the specified element and all of its descendants. The coordinate system of any descendants is likewise rotated. Using 2D and 3D Transforms 2D Transform Functions 2012-07-23 | © 2012 Apple Inc. All Rights Reserved. 63The following snippet rotates a div element 45 degrees clockwise, as shown in Figure 7-3. The div element has a beige background and contains a paragraph of text and an image; both the text and the image inherit the div element’s rotation. A second div is positioned under the rotated div to show the original div’s position prior to rotation.

Figure 7-3 Rotating an element Rotation can be specified in positive or negative degrees. For example, -webkit-transform: rotate(-45deg); specifies a 45 degree rotation counterclockwise. If rotation is animated,specifying a degree of rotation greater than the current degree causes clockwise rotation; specifying a degree of rotation less than the current degree causes counter-clockwise rotation. When animating rotation, it can be useful to specify a rotation of more than 360 degrees. For example, Listing 7-1 uses JavaScript to set a rotation of 3600deg, causing a div element to spin clockwise ten times. The text spins once on page load, and a button lets the user spin it again. Listing 7-1 Animating 2D rotation

spin-in text

Spinning text!

Whew! I'm dizzy...

Notice that the CSS property -webkit-transform is addressed in JavaScript as element.style.webkitTransform. Notice also that the spin() function increments the rotation angle by 3600 each time it is called; setting the angle to 3600deg repeatedly would have no effect. 2D Scaling 2D scaling makes an element smaller or larger in one or two dimensions. Scaling affects the whole element, including any border thickness. By default, the element isscaled up or down relative to its center, which causes all four of the element’s corners to be redrawn at new locations. The element’s top, left, height, and width properties are unchanged, however,so the layout of the page is not affected. Consequently,scaling an element up can cause it to cover other elements on the page unless you design the layout to allow room for the expansion. Using 2D and 3D Transforms 2D Transform Functions 2012-07-23 | © 2012 Apple Inc. All Rights Reserved. 65Scaling modifies the coordinate system of an element’s descendants, multiplying the x and y values by the specified scaling factor. For example, if a div element contains an image positioned absolutely at 10,10, with a height and width of 100 pixels, scaling-up the div element by a factor of two results in a 200 x 200 image, positioned at 20,20 relative to the div’s upper-left corner, which moves up and to the left. Figure 7-4 illustrates this behavior. Figure 7-4 Scaling an element up Apply a scale transformation by setting the -webkit-transform property to scale(x y), where x and y are independent scale factors for width and height, or by setting the transform property to scale(size), where size is the scaling factor in both dimensions. For example: style="webkit-transform: scale(1, 2)" renders an element the same width, but twice as tall. style="webkit-transform: scale(2, 0.5)" renders an element twice as wide and half as tall. style="webkit-transform: scale(1.5)" renders an element 1.5 times larger. Setting Multiple Transforms Different transforms, such as rotation and scaling, are applied by setting different values to a single property: -webkit-transform. Consequently, if you apply one transform to an element and then specify another transform, the first transform is no longer applied; the new value overwrites the old one, as with any CSS property. There are two different ways to perform multiple transforms on an element—both scaling and rotating an element for example: Using 2D and 3D Transforms Setting Multiple Transforms 2012-07-23 | © 2012 Apple Inc. All Rights Reserved. 66● Use inheritance to apply multiple transforms: create a scaled div element, for example, add your element as a child, then rotate the child element. ● Set the -webkit-transform property of the element to a space-delimited list of transform functions, such as: -webkit-transform: scale(2) rotate(45deg); When a list of functionsis provided, the final transformation value for the element is obtained by performing a matrix concatenation of each entry in the list. (Matrix concatenation can have some side effects, such as normalizing the rotation angle modulo 360.) Both approaches—transform inheritance and transform function lists—are valid. The following two examples illustrate two ways to apply a set of transforms to an element. Listing 7-2 sets an element’s transform property to a list of transform functions. Listing 7-3 produces the same results by applying each transform to a nested element. Listing 7-2 Setting multiple transforms using a list

Listing 7-3 Nesting 2D transforms

Changing the Origin By default, the origin for transforms is the center of an element’s bounding box. Most HTML and CSS entities use the upper-left corner as the default origin, but for transforms, it is usually more convenient to use the center of an element as a reference point. Consequently, elements rotate around their center by default, and scale up or down from the center out. Using 2D and 3D Transforms Changing the Origin 2012-07-23 | © 2012 Apple Inc. All Rights Reserved. 67To change the origin for transforms of a given element, set the -webkit-transform-origin property. The new origin is specified as a distance or percentage from the element’s upper-left corner. For example, the default center origin can be expressed as -webkit-transform-origin: 50% 50%;. Changing the origin to 0% 0% or 0px 0px causes transformation to occur around the upper-left corner of the element. The code in Listing 7-4 rotates the second box in Figure 7-5 around the top-right corner. Listing 7-4 Rotating an element around the top-right corner

I am rotated about my top-right corner.

Figure 7-5 Element rotated around the top-right corner Using 2D and 3D Transforms Changing the Origin 2012-07-23 | © 2012 Apple Inc. All Rights Reserved. 683D Transforms The standard HTML coordinate system has two axes—the x-axis increases horizontally to the right, and the y-axis increases vertically downwards. With 3D transforms, a z-axis is added, with positive values rising out of the window toward the user and negative values falling away from the user, as Figure 7-6 illustrates. Figure 7-6 3D coordinate space – Z - Y + Y + X – X + Z 3D transforms move an element out of the usual xy plane, where z=0—the plane of the display. A transformed element isstill two dimensional, but it no longer liesin the usual plane. A transformed object may be translated along the z-axis, rotated around the x- or y-axis, or transformed using some combination of translation and rotation. All HTML elements have a z-index. The z-index controls the rendering order when elements overlap. An element’s z-index has nothing to do with its z-axis coordinate. Transformed objects follow the standard HTML rendering rules—objects with higher z-index values are drawn on top of other objects with lower z-index values—but for elements sharing the same z-index, the areas with higher z-axis coordinate values are drawn on top. Using 2D and 3D Transforms 3D Transforms 2012-07-23 | © 2012 Apple Inc. All Rights Reserved. 69Adding 3D Perspective To render elements with the appearance of depth, you must specify a perspective. If you apply 3D transforms without setting the perspective, elements appear flattened. For example, if you rotate an element around its y-axis without setting the perspective, the element just appears narrower. If you rotate an element 90 degrees from the default xy plane, it is seen edge-on—the element either disappears entirely or is displayed as a line. Adding perspective distorts the appearance of objects realistically, making nearby things appear larger and distant things look smaller. The closer the object, the greater the distortion. In order for Safari to create the illusion of depth, it’s necessary to specify a point of view, or perspective. Once Safari knows where the user’s eye is relative to an element, it knows how much distortion to apply and where. Use the -webkit-perspective property to set the perspective for all the descendants of an element. For example:

The perspective is specified in distance from the screen. You may specify the distance in pixels, centimeters, inches, or any CSS distance unit. If no unit type is supplied, px is assumed. Note: Perspective distortion can cause part or all of an element to be displayed offscreen, particularly if an object’s z-coordinates are positive and the projected image would extend beyond the specified viewpoint, somewhere behind the user’s eye. Tip: Perspective settings of 300px or less tend to create intense perspective distortion; settings from 500px to 1000px create moderate perspective distortion, and settings of more than 2000px give very mild perspective distortion. Listing 7-5 sets the -webkit-perspective property using a slider. Listing 7-5 Adding a perspective slider

applying perspective

Left

Center

Right

The center element is edge-on, and not visible.

Using 2D and 3D Transforms 3D Transforms 2012-07-23 | © 2012 Apple Inc. All Rights Reserved. 73 Figure 7-8 Perspective origin effects Creating a 3D Space By default, the descendants of an element are flattened into the plane of their parent. When you apply a 3D transform to an element, that element’s plane is no longer the default xy plane—the plane of the display. All descendants of the element share that element’s new plane. In order to further transform the children of an element relative to that element’s plane, you must set the -webkit-transform-style property to preserve-3d, creating a 3D space. For example:

Setting the transform style to preserve-3d in an element makes that element into a 3D container; all the element’s immediate children can be manipulated independently in 3D, relative to the parent. Because HTML elements are flat, a transformed child also occupies a plane in 3D space. Each child can occupy a separate plane, or multiple children can share the same plane. By default, any descendants of these transformed children are flattened into their parental plane; setting the transform style to preserve-3d affects only an element’s immediate children. Using 2D and 3D Transforms 3D Transforms 2012-07-23 | © 2012 Apple Inc. All Rights Reserved. 743D containers can be nested. Enabling 3D transforms in one of a container element’s descendants creates a nested 3D layer; children of that descendant can be transformed in 3D, relative to their container’s plane. You need to enable 3D in a particular element only if the element’s children are to be transformed in 3D relative to that element’s plane. Any transform applied to a 3D container is inherited by all of its descendants. By applying a rotation to the highest level 3D container, for example, you are able to rotate the view of all of the container’s contents at once. Listing 7-7 gives an example of a nested pair of 3D containers, illustrated in Figure 7-9. The topmost container has a child div element rotated 45 degrees on its x-axis, so it appears to be tilted away from the viewer. This child div is also a 3D container, containing a paragraph of text rotated 35 degrees on its right edge away from the container, causing the text to appear to lift off the page. Listing 7-7 Nested 3D rotations

And so the text seems to lift off the page and float, as if transformed. Well, I suppose it is transformed, and that explains the appearance, if not quite the magic, of it...

Using 2D and 3D Transforms 3D Transforms 2012-07-23 | © 2012 Apple Inc. All Rights Reserved. 75 Figure 7-9 Text rotated relative to 3D backdrop Generally speaking, you need to create only a single 3D container—all 3D transforms can be applied relative to the default xy plane, and global transforms can be applied to the top-level container and inherited by all its descendants. Sometimesit may be convenient to manipulate a subgroup of transformed elements as a unit, however; in such a case, it makes sense to create a nested container. To disable 3D for an element’s children dynamically, set the -webkit-transform-style property to flat. Applying a 3D transform when the transform style is set to flat does not move the element out of its parent’s plane. Note: Elements that have overflow set to hidden are unable to render their child elements in 3D, and are rendered as though the transform style were set to flat. 3D Transform Functions Like 2D transforms, 3D transforms are set using the -webkit-transform property. You can apply a transform to an element by specifying a transform function, a list of transform functions, or by passing in a 3D matrix. There are several functions that perform 3D transforms: Using 2D and 3D Transforms 3D Transforms 2012-07-23 | © 2012 Apple Inc. All Rights Reserved. 76● translateZ(distance)—Moves an element closer or farther away. ● translate3d(x, y, z)—Moves an element in three dimensions. ● rotateX(degrees)—Rotates an element around the x-axis, moving the top and bottom closer or farther away. ● rotateY(degrees)—Rotates an element around the y-axis, moving the left and right sides closer or farther away. ● perspective(distance)—Sets the 3D perspective for a single element. Important: You must set a perspective for 3D transforms to have a visible 3D effect. See “Adding 3D Perspective” (page 70) and “Creating a 3D Space” (page 74) for details. 3D Translation 3D translation moves an element closer to or farther from the viewer by changing its position on the z-axis. Use the translateZ() function to shift an element on the z-axis, or the translate3d(x, y, z) function to shift an element on two or three axes. For example:

Using 2D and 3D Transforms 3D Transforms 2012-07-23 | © 2012 Apple Inc. All Rights Reserved. 77The 3D translation functions work like their 2D counterparts, except that the z offset cannot be specified as a percentage. Z-axis units may be positive (towards the viewer) or negative (away from the viewer). Figure 7-10 shows two identical div elements with same height, width, and x and y positions, one translated on the z-axis by 100 px and the other translated by -100 px. Figure 7-10 Z-axis translation in perspective All descendants of an element inherit its z-axis translation. Note that the text in the previous illustration is translated along with its parent. 3D Rotation You can rotate an element in 3D either around the y-axis,so that the right and left edges get nearer and farther away, or around the x-axis, so that the top and bottom edges get nearer and farther away. For example:

Using 2D and 3D Transforms 3D Transforms 2012-07-23 | © 2012 Apple Inc. All Rights Reserved. 78Rotation is around an imaginary x- or y-axis that passes through the element’s origin. By default, the origin is at the center of an object. Positive x units rotate the top edge away. Positive y units rotate the right edge away. This is illustrated in Figure 7-11. Figure 7-11 X and y rotation All descendants of an element inherit its 3D rotation. Note that the text in the previous illustration is rotated along with its parent. Setting Perspective for a Single Element To create a 3D space with a shared perspective, you need to create a 3D container that has the -webkit-perspective property set; but if you just want to render a single element with the appearance of depth, you can set the -webkit-transform property to a list of transform functions that includes the perspective(distance) function as the first transform. For example:

This text is rotated 45 degrees around its x-axis.

The foregoing snippet performs two 3D transforms on an element—rotation about the x-axis and perspective distortion, as if the user were viewing the object from 10 cm in front of the screen. Using 2D and 3D Transforms 3D Transforms 2012-07-23 | © 2012 Apple Inc. All Rights Reserved. 79Important: The perspective() transform function must be the first function in the list of transforms—you must establish the perspective prior to applying the other transforms. In almost all cases, it is better to create a 3D container and set the -webkit-perspective property for the container element than it isto apply the perspective() transform to an element directly. See Figure 7-7 (page 72) for details. Back Face Visibility If an element is rotated 90 degrees or more around the x- or y-axis, the back face of the element faces the user. The back face of an element is always transparent, so the user sees a reversed image of the front face through the transparent back face, like a sign painted on a glass door and seen from behind. To prevent the mirror image of the front face from being displayed, set the -webkit-backface-visibility property to hidden. For example: -webkit-backface-visibility: hidden; When -webkit-backface-visibility is set to hidden, an element is not displayed where its back face would be visible. One reason to do this is to create the illusion that an element has two faces, each with their own content. For example, to create the illusion of a card with different contents on the front and back face, two elements are positioned back to back in the same location. The two elements are then rotated together, progressively hiding the front element and revealing the back element. If the back face of the top element were visible, it would obscure the element beneath it instead of revealing the element beneath it as it rotates. Listing 7-8 creates the illusion of a card with content on both sides, as Figure 7-12 shows. Listing 7-8 Hiding the back side of a card

Back of card

Front of card

Figure 7-12 Cardflip example See the HTML version of this document to view the video. document to view the video. Using Transformation Matrices A transformation matrix is a small array of numbers (nine numbers for a 2D matrix, sixteen for a 3D matrix) used to transform another array, such as a bitmap, using linear algebra. Safari provides convenience functions for the most common matrix operations—translation, rotation, and scaling—but you can apply other transforms, such as reflection or shearing, by setting the matrix yourself. Using 2D and 3D Transforms Using Transformation Matrices 2012-07-23 | © 2012 Apple Inc. All Rights Reserved. 812D Matrix Operations For a 2D transform, set the -webkit-transform property to matrix(a,b,c,d,e,f), where the matrix position of the parametersisin column order, as Figure 7-13 shows. The first column in the matrix isthe x vector; the second column is the y vector. Figure 7-13 2D transformation matrix parameter positions c 0 0 1 b a d e f To make full use of transformation matrices, you need an understanding of linear algebra. But even without an understanding of linear algebra, you can often look up the matrix values for a particular effect. For example, here are the settings for reflection around the x- and y-axes: Reflection around the y-axis— -webkit-transform: matrix(-1,0,0,1,0,0); Reflection around the x-axis— -webkit-transform: matrix(1,0,0,-1,0,0); Here are the matrix parameter settings for some common effects: translate(x, y) = matrix(1, 0, 0, 1, x, y) scale(x, y) = matrix(x, 0, 0, y, 0, 0) rotate(a) = matrix(cos(a), sin(a), -sin(a), cos(a), 0, 0) skewx(a) = matrix(1, 0, tan(a), 1, 0, 0) skewy(a) = matrix(1, tan(a), 0, 1, 0, 0) An example of using matrix settingsto mirror,stretch, and skew elementsis given in Listing 7-9 and isillustrated in Figure 7-14. Listing 7-9 Matrix example

Mirror transform

This element is reflected.

This element is reflected and stretched.

This element is reflected, stretched, and skewed.