CSS Master

Table 6.2. Current browser support for 3D transforms

Internet Opera Safari Android UC Browser

Explorer

Chrome Firefox

9+ (requires

-webkit-

prefix)

2.1 (versions

4.4.4

require

-webkit-

prefix)

3.2+

(versions 8

require

-webkit-

prefix)

15+

(versions

15-22

require

-moz-

prefix)

1 0+ (no

support for

transform-

style: pre

serve-3d

)

1 0+

(versions

1 0-15

require

-moz-

prefix)

12 (versions

12-35

require

-webkit-

prefix)

Of course, some web users aren’t using up-to-date browsers. If you need to support
ancient browsers (Firefox ≤ 10, Chrome ≤ 11, Safari 3, Opera ≤ 14, and Android
≤ 2.3), ensure that your content still looks good and works well without transforms.

How Transforms Affect Layout

Beforewegotoomuchfurther,thereareafewdetailsyoushouldknowabouthow
thetransformpropertyaffectslayout.Whenyouapplythetransformpropertyto
anelementanditsvalueisotherthannone,threethingshappen.

■ Theelementbecomesacontainingblockforchildelements.
■ Itestablishesanewstackingcontextfortheelementanditschildren.
■ Itimposesalocalcoordinatesystemwithintheelement’sboundingbox.

Let’slookattheseconceptsindividually.

transform Creates a Containing Block

Whenanelementispositioned—thatis,whenthevalueofthepositionproperty
issomethingotherstatic—itisdrawnrelativetoacontainingblock.Acontaining
blockistheclosestpositionedancestoror,failingthat,therootelement(suchas
htmlorsvg)ofadocument.

InFigure6.4,thechildrectanglehasapositionvalueofabsolute.Itsrightand
bottompropertiesarebothsetto 0 .Itsparentelementhasapositionvalueofrel-
ative.Becausetheparentinthiscaseispositioned,itbecomesacontainingblock

CSS Transforms 227