CSS 3D Transforms

Used before category names. CSS

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)