As noted already, support for CSS3 effects and transforms is irregular, and a work in progress. Within that framework, the four available transforms (scale
, translate
, rotate
, and skew
) are relatively stable and widely supported. Effects, on the other hand, are even less consistently supported, and less finite in the sense of there being a "list" of available effects that are supported (albeit with unique coding prefixes) across browsing environments.
Part of the reason for this is that a number of effects are very flexible. For example, the text-shadow
effect can be tweaked to produce outlined type, as shown in the following screenshot:
With what has been discussed so far about the flexible and open-ended nature of CSS3 effects, let's examine three of the most useful effects: opacity, border radius, and sadow (for both boxes and text).