CSS Master

The Current State of Transforms

TransformsaredefinedbytheCSSTransformsspecification.^2 Atonepoint,two-

dimensionalandthree-dimensionaltransformsweredefinedbytwoseparatespe-

cifications.Asyoumovethroughthechapter,you’llnoticeabitofredundancyin

functionnames.

Because the specifications for 2D and 3D transforms were drafted separately, the

landscape of browser support is a little complicated. The latest versions of most

browsers support both. Safari ≤ 8, Blackberry, and UC Browser still require the

-webkit-vendorprefix.Mostotherbrowserssupporttransformswithoutavendor

prefix.That’sthegoodnews.

Thebadnewsisthatnotallbrowserscompletelysupportallfeatures.InternetEx-

plorer 10 and 11 offersupportfor3Dtransforms,buttheirlackofsupportforthe

transform-stylepropertymeansthat3Dtransformscan’tbenested.Thisisnot

trueofMicrosoftEdge,therecentlyreleasedbrowserforWindows10,whichsupports

alltransforms-relatedproperties.Table6.1andTable6.2showthestateofbrowser

supportfor2Dand3Dtransforms.

Table 6.1. Current browser support for 2D transforms

Internet Opera Safari Android UC Browser

Explorer

Chrome Firefox

9+ (require

-webkit-

prefix)

2.1 (versions

4.4.4

require

-webkit-

prefix)

3.1+

(versions 8

require

-webkit-

prefix)

1 1.5+

(versions

1 1.5 require

-o- prefix,

while

versions

15-22

require

-webkit-

prefix)

9+ (versions

< 10 require

-ms-

prefix)

3.5+

(versions

15 require

-moz-

prefix)

4+ (versions

35 require

-webkit-

prefix)

(^2) http://dev.w3.org/csswg/css-transforms/
226 CSS Master