Transformaciones 3D CSS

Transformaciones 3D CSS

CSS también admite la transformación 3D.

Coloque el cursor sobre los elementos siguientes para ver la diferencia entre la transformación 2D y 3D:

2D rotate
3D rotate

In this chapter, you will learn the following CSS properties:

  • transform

Browser Support

The numbers in the table indicate the first browser version that fully supports this property.

Property Chrome IE Firefox Safari Opera
transform 36.0 10.0 16.0 9.0 23.0

CSS 3D Transformation Method

Through CSS transform Properties, you can use the following 3D transformation methods:

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

rotateX() Method

Gira X

rotateX() Method to rotate the element around its X-axis by a given angle:

Example

#myDiv {
  transform: rotateX(150deg);
}

Try It Yourself

rotateY() Method

Gira Y

rotateY() Method to rotate the element around its Y-axis by a given angle:

Example

#myDiv {
  transform: rotateY(130deg);
}

Try It Yourself

rotateZ() Method

rotateZ() Method to rotate the element around its Z-axis by a given angle:

Example

#myDiv {
  transform: rotateZ(90deg);
}

Try It Yourself

CSS Transformation Properties

The following table lists all 3D transformation properties:

Property Description
transform Apply 2D or 3D transformation to the element.
transform-origin Allow you to change the position of the transformed element.
transform-style Specify how nested elements are displayed in 3D space.
perspective Specify the perspective effect of the 3D element.
perspective-origin Specify the bottom position of the 3D element.
backface-visibility Define whether the element is visible when it is not facing the screen.

CSS 3D Transformation Method

Function Description
matrix3d(n,n,n,n,n,n,
n,n,n,n,n,n,n,n,n,n)		 Define 3D transformation, using a 4x4 matrix with 16 values.
translate3d(x,y,z) Define 3D transformation.
translateX(x) Define 3D transformation, using only the value for the X-axis.
translateY(y) Define 3D transformation, using only the value for the Y-axis.
translateZ(z) Define 3D transformation, using only the value for the Z-axis.
scale3d(x,y,z) Define 3D scaling transformation.
scaleX(x) Define 3D scaling transformation by providing an X-axis value.
scaleY(y) Define 3D scaling transformation by providing a Y-axis value.
scaleZ(z) Define 3D scaling transformation by providing a Z-axis value.
rotate3d(x,y,z,angle) Definir la rotación 3D.
rotateX(angle) Definir la rotación 3D a lo largo del eje X.
rotateY(angle) Definir la rotación 3D a lo largo del eje Y.
rotateZ(angle) Definir la rotación 3D a lo largo del eje Z.
perspective(n) Definir la vista de perspectiva de transformación 3D del elemento.