3D Transforms

CSS 3D transforms create depth and visually interesting elements on your page using perspective. Two major properties are used to define CSS transforms:

transform and transform-origin and transform-style

With This property you can use the following 3D transformation methods:

  • rotateX()
  • rotateY()
  • rotateZ()
Div {
  transform: rotateX(180deg);
  transform: rotateY(130g);
  transform: rotateZ(90deg);
}

3D transforms methods:

  • translate3d(x,y,z)
  • translateX(x)
  • translateY(y)
  • translateZ(z)
  • scale3d(x,y,z)
  • scaleX(x)
  • scaleY(y)
  • scaleZ(z)
  • rotate3d(x,y,z,angle)
  • perspective(n)