CSS Transitions and Transforms

CSS3 Styling

3.4 CSS Transitions and Transforms

So far we have dealt only with rectangular regions for media elements that are simply placed somewhere in the browser window. For richer interfaces it is often a requirement to include some animation or effects to make the display more appealing to the user.

CSS3 introduces several features for this:

• transitions that allows movement of elements between different states.

• 2D transforms, which allow applications of two-dimensional transformations to an element, such as rotating, scaling or skewing.

• 3D transforms, which provide the ability to make the element appear as though it has three dimensions.

3.4.1 Transitions

Normally, when changing the value of a CSS property of an element, that value is applied immediately.

With CSS transitions,⁹ it is possible to animate that transition from one CSS state of a property to another.

The following properties are available:

• transition-property – identifies the CSS property for which to apply the transition,

• transition-duration – specifies over what time the transition should be applied,

• transition-delay – specifies if there should be a startup delay for applying the transition,

• transition-timing-function – defines the transition velocity; i.e. whether to speed it up/slow it down, etc.

• transition – combines all the properties in one statement.

There is a long list of properties that transitions can be applied to.¹⁰ It includes borders,

backgrounds, colors, element extents and positioning, opacity and visibility, stacking order in z-index, font weight, and size, shadows, and alignment.

The transition can be invoked through JavaScript, which explicitly changes the value of a property.

But also CSS pseudo-classes can cause a change in state for elements, such as the :hover, :focus, and :active pseudo-classes. Finally, when a CSS element is animated through the CSS3 animation property, transitions can also be applied.

In Listing 3–12 we have an example of a transition applied on a video as we mouse over it.

9 See http://www.w3.org/TR/css3–transitions/

10 See http://www.w3.org/TR/css3–transitions/#animatable-properties

http://freepdf-books.com

69 Listing 3–12. An example document with a video element that transitions on mouse-over

-moz-transition-timing-function: linear;

-webkit-transition-property: all;

-webkit-transition-duration: 0.5s;

-webkit-transition-timing-function: linear;

-o-transition-property: all;

</video>

In Listing 3–12 we change the height, padding, left, top, and background color for the video element as we mouse over. The effect is that the video looks like it's coming towards us. We can do this even while the video plays back. Notice that as we increase the video size, we also increase the padding and the left/top positioning so it looks realistic. The background color shows in the padding area of the video and goes from white through diverse shades of gray to black. As we mouse out of the video area,

everything returns to the previous state. Figure 3–12 tries to show the transition through a sequence of screenshots.

Note that again the actual CSS3 transition properties are not used by the browsers yet, but only browser-specific versions. As the CSS3 specification matures it can be expected that all browsers drop the browser-specific prefix on the properties.

http://freepdf-books.com

Figure 3–12 A transition on a <video> element in Chrome given through three successive screenshots All browsers except for IE support CSS transitions.

3.4.2 2D Transforms

The transform CSS property allows you to modify the coordinate space of the CSS visual formatting model. The following transform functions are available:

• matrix – describes a linear transformation matrix on the box,

• rotate, rotateX, rotateY – describes how the box should be rotated,

• scale, scaleX, scaleY – describes how the x and y dimensions of the box should be scaled,

• skew, skewX, skewY – describes how the element should be skewed around the x and y axis by an angle,

• translate, translateX, translateY – is equivalent to relative positioning on the x and y axis.

A simple rotation example is given in Listing 3–13 and Figure 3–13 shows the result in Firefox.

Listing 3–13. An example document with a rotated video element <style type="text/css">

video {

height: 200px;

position: absolute;

left: 60px;

top: 200px;

border: 5px solid black;

transform: rotate(-30deg);

-webkit-transform: rotate(-30deg);

-o-transform: rotate(-30deg);

-moz-transform: rotate(-30deg);

} </style>

</video>

http://freepdf-books.com

71 Figure 3–13. A rotated <video> element in Firefox.

Note how the transform property is not yet uniformly adopted by all browsers, but instead it is required to use special prefixes for every browser platform. Once this feature of CSS3 stabilizes in the specification, it is expected that all browsers adopt it. Also note that IE doesn't support CSS3 transforms yet.

The most powerful 2D transform function is the matrix. It is possible to achieve all the other effects by using a linear transformation matrix. If you are a bit rusty on your math, you might want to check out the examples at the Wikipedia article on linear transforms.¹¹

It is also possible to combine transforms by listing several of them in the transform property. You could for example define “transform: scale(2) rotate(45deg) translate(80px);.” Also, there is a lot more to learn about transforms in CSS, e.g. the transform-origin property, which defines around which point in the box the transform is to be executed. However, this is not a book about CSS, but we hope this has given you a sufficient introduction to get started.

3.4.3 3D Transforms

As an extension to the 2D transforms described in the previous section, CSS3 also standardizes a set of 3D transform functions.¹² They are used in the same way as the 2D transform functions as a value to the transform property.

The following additional 3D transform functions are specified:

• translate3d, translateZ – allows you to move the element in the z-dimension; a positive z moves it toward the viewer.

• scale3d, scaleZ – allows you to scale the element in the z dimension.

• rotate3d – allows rotation around a vector in the 3D space.

• perspective – allows introducing a 3D perspective into a transformation for a single element.

• matrix3d – a linear transformation matrix in 3D with 4x4 values in column-major order.

11 See http://en.wikipedia.org/wiki/Linear_transformation#Examples_of_linear_transformation_matrices

12 See http://www.w3.org/TR/css3–3d-transforms/

http://freepdf-books.com

To allow placement of elements in the 3D space, the transform-origin property has been extended to allow three values, with the third one specifying a z offset for the transform origin.

As hierarchies of different objects in the 3D space are built, the perspectives between the different elements should be preserved and the picture not flattened. To this end, there is a transform-style property that allows you to choose between flat presentation and preserve-3d. The preserve-3d value states that the element to which it is assigned does not flatten its children into it, but instead has them live in a shared 3D space with the element.

In addition, for 3D effects, there is also the perspective property. The perspective and perspective-origin properties determines how elements change size as they move away from the z=0 plane on their z-offset. The default origin for the perspective effect is the center of the element’s box model, but can be changed with the perspective-origin property.

Finally, there is the backface-visibility property, which allows you to prevent the back of content in 3D from shining through.

Listing 3–14 provides an example use of 3D properties. A cube is created in 3D with a video on each side.¹³ The 3D space is created by setting a perspective and a perspective origin in a div. Within that div, a 300x300 pixel area is created by using width, height and a preserve-3d transform. In contrast to using 2D transforms with skew and scale for creating 3D presentations, this ascertains that aspect ratios are retained. Each side of the cube is then positioned within the 300x300 space by rotation around the x or y axis and positioning away from the center along the z axis. The videos live on these sides. Note how you can see the backface of the videos through the cube. This can be turned off by setting backface-visibility to hidden.

Listing 3–14. An example document with a rotated video element <style type="text/css">

-webkit-transform: rotateX(90deg) translateZ(150px);

}

div#two {

-webkit-transform: translateZ(150px);

}

div#three {

-webkit-transform: rotateY(90deg) translateZ(150px);

}

13 Motivated by http://www.fofronline.com/2009-07/animated-css3–cube-interface-using-3d-transforms/

http://freepdf-books.com

73 div#four {

-webkit-transform: rotateY(180deg) translateZ(150px);

}

div#five {

-webkit-transform: rotateY(-90deg) translateZ(150px);

}

Note that the 3D CSS3 features are available only in Safari and Chrome. Thus, we have reduced the example to only webkit prefix properties – otherwise it would have been even longer. Figure 3–14 shows what it looks like in Safari.

http://freepdf-books.com

Figure 3–14. A <video> cube created with 3D CSS in Safari

Right now, the cube only sits there in 3D. Combining it with the transformation possibilities described earlier would enable us to make it interactive. For example, when hovering over certain areas of the cube, one could turn the cube in space. This exercise is left to the reader.

3.4.4 Putting a Video Gallery Together

To conclude this section, we will create an example that uses several features introduced in the section in a creatively styled video gallery.

The example has six videos, each of which is put in a div styled to look somewhat like a smartphone with silver rounded borders, and a black background. These “phones” are thrown in a pile, placed at different positions through absolute top and left offsets. Upon mousing over a “phone,” a transition is performed to a larger version of the “phone” in the foreground with a larger version of the video and horizontally aligned. This produces somewhat of a zoom effect. In all browsers, the transition is performed smoothly and resembles an action of picking up that “phone.” As you mouse out of the

“phone,” it drops back into place in the pile.

You can try to create the code for this example yourself. It uses only features that we have previously discussed. The core parts of the code are displayed in Listing 3–15. Don't forget to add the browser-specific versions of the CSS3 properties where necessary. The resulting display will be something like what is shown in Figure 3–15. It works in all browsers except IE, where the “phones” are all horizontally laid out. The screenshot is from Opera.

Listing 3–15. A HTML5 <video> gallery created with CSS exclusively CSS code extract:

div.container { position: absolute;

width: 320px; height: 165px;

padding: 10px 35px 10px 35px;

http://freepdf-books.com

div.container, div.container:hover { transition-property: all;

transition-duration: 0.5s;

transition-timing-function: linear;

}

div#one:hover, div#two:hover, div#three:hover, div#four:hover, div#five:hover, div#six:hover { transform: rotate(0deg);

// introduce your own versions for div #two to #six </style>

HTML code extract:

<body>

</video>

</div>

// introduce the other videos and divs analogously </body>

http://freepdf-books.com

Figure 3–15. An HTML5 <video> gallery in Opera

In document HTML5 Video. The Definitive Guide to. Silvia Pfeiffer THE EXPERT S VOICE IN WEB DEVELOPMENT (Page 84-92)