Pro CSS3 Animation

(Tuis.) #1

CHAPTER 2 ■ CSS3 TRAnSfoRmS And TRAnSiTionS


With this basic page in place, you can start to apply transforms to the image element.

Rotate


First, you’ll transform the image by rotating it (see Listing 2-2). Values for CSS3 rotation transformations can
be specified in degrees, gradians, turns or radians, using positive or negative floating-point values to create
clockwise or anticlockwise rotation. You must include vendor prefixes to cover all browsers.


Listing 2-2. Inline CSS to Rotate an Image


Statuette of Dudley Storey


The result of the code in Listing 2-2 is shown in Figure 2-2.


Figure 2-1. An image floated with paragraph text

Free download pdf