Transforms

Overview

• Performant and non-destructive element manipulation

• Applied in 2D or 3D space

• Transforms don't change document flow i.e. don't push other elements around

Read

[Transformation properties (Web.Dev)](https://web.dev/learn/css/functions#transforms

Practice Pens

2D Transforms

• 2D transform functions

  • rotate()

  • scale()

  • skew()

  • translate()

3D Transform

• translate3d(x, y, z)

• translateZ(z)

• rotate3d(x, y, z, angle)

• rotateX(angle)

• rotateY(angle)

• rotateZ(angle)

• scale3d(x, y, z)

• scaleZ(z)

• matrix3d()

• Supporting 3D properties

  • perspective

  • `perspective-origin

  • transform-style: preserve-3d

  • backface-visibility

Additional References

• CSS Transform Handbook (Free Code Camp)