CSS Master Code Examples: Chapter 6

Back to chapter demo list

transform property: Stacking context

A Roadside Hawk by Dario Sanches Adding the transform property to an element — in this case the image — gives that element a stack level of 0. According to the rules of the stacking context, this means a transformed item will be stacked on top of items that do not have a stacking context.

Positioned elements and elements with an opacity of less than 1 may be stacked on top of a transformed element if: 1) the element appears after the transformed element in the HTML source; or 2) if it has a higher z-index.

Clicking the Toggle transform button toggles a .transformed class for the image. This class sets a translation transform of 50% along the X axis.

Further reading