HTML and CSS Reference
In-Depth Information
chapter 20
2D Transforms and Transitions
One of the main drawbacks of website design has always been the strict rectangular layout imposed by the box
model. The CSS Transforms module (
http://dev.w3.org/csswg/css3-transforms/
)
seeks to give designers
greater freedom by making it possible to shift, rotate, scale, and skew elements. Originally, there were three
separate modules: for two- and three-dimensional transforms, and for scalable vector graphics (SVG). These
have been merged into a single module, which is currently only a working draft. However, browsers have made
significant progress with two-dimensional transforms. They're supported by all mainstream browsers except IE 8
and earlier.
A simple example of a 2D transform is scaling down and rotating an image in its normal state, and restoring
its normal size and orientation on hover. When this happens with just a transform, the change is instantaneous.
The CSS Transitions module (
http://dev.w3.org/csswg/css3-transitions/
)
offers a simple way to smooth
the change from one state to another over a specified duration. CSS transitions can be applied to a wide range of
properties, and are supported by all mainstream browsers except IE 9 and earlier.
In this chapter, you'll learn about the following:
•
Using 2D transform functions to move, rotate, scale, and skew elements
:hover
pseudo-class
•
Preventing touch-screen devices from activating the
•
Understanding which properties are animatable
•
Controlling the duration and speed of a transition
•
Setting up a sequence of transitions
•
Creating a rollover image without JavaScript
Browser Support for 2D Transforms and Transitions
Most mainstream browsers have supported 2D transforms and transitions for several years with browser-specific
prefixes. The exception is Internet Explorer. IE 8 and earlier support neither. IE 9 introduced support for 2D
transforms with the
-ms-
prefix. IE 10 added support for transitions.
The W3C announced in June 2012 that browsers could start using unprefixed properties for both transforms
and transitions. The first versions to do so are IE 10, Firefox 16, and Opera 12.50. At the time of this writing,
WebKit-based browsers still require browser-specific prefixes.
■
The source files for this chapter contain the browser-specific properties in separate rules for testing in
older browsers. The unprefixed properties are lower down the styles, so they override the browser-specific ones.
Note
