CSS3 Transforms

CSS3 transforms allow you to translate, rotate, scale, and skew elements. A transformation is an effect that lets an element change shape, size and position. CSS3 supports 2D and 3D transformations. Mouse over the elements below to see the difference between a 2D and a 3D transformation:

2D rotate
3D rotate


2D transforms uses the following methods:

  • translate()
  • rotate()
  • scale()
  • skewX()
  • skewY()
  • matrix()

While the 3D transform uses these methods:

  • rotateX()
  • rotateY()
  • rotateZ()

Back button Table of Contents Next button