56 - CSS Transforms 3D: rotateX, rotateY y rotate() 🚀

---

56 - Transforms en 3D: Dale profundidad a tu web 🚀

Las transformaciones en 3D con CSS permiten dar un efecto de profundidad a los elementos de tu página, creando una experiencia más realista y atractiva. En esta lección aprenderás a usar rotateX(), rotateY() y la función rotate().

---

1. La función rotateX()

La función rotateX() gira un elemento alrededor del eje X. Pasa el ratón sobre la caja para ver el efecto.

.caja { transition: transform 1s; }
.caja:hover { transform: rotateX(60deg); }

rotateX

---

2. La función rotateY()

La función rotateY() rota un elemento alrededor del eje Y. Pasa el ratón sobre la caja para ver el efecto.

.caja { transition: transform 1s; }
.caja:hover { transform: rotateY(60deg); }

rotateY

---

3. La función rotate()

La función rotate() permite girar elementos en 2D. Pasa el ratón sobre la caja para ver el efecto.

.caja { transition: transform 1s; }
.caja:hover { transform: rotate(45deg); }

rotate

---

4. Transform Properties

Property	Description
transform	Applies a 2D or 3D transformation to an element
transform-origin	Change the position of transformed elements
transform-style	Specifies how nested elements are rendered in 3D
perspective	Defines the depth perception of 3D elements
perspective-origin	Sets the origin for perspective
backface-visibility	Controls if the back of an element is visible

---

5. Funciones de transformación 3D CSS

Function	Description
matrix3d()	Defines a 3D transformation using a 4x4 matrix
translate3d()	Defines a 3D translation
translateZ()	Translation only in the Z-axis
scale3d()	Defines a 3D scale transformation
scaleZ()	Scales an element along the Z-axis
rotate3d()	Defines a 3D rotation
rotateX()	Rotation along the X-axis
rotateY()	Rotation along the Y-axis
rotateZ()	Rotation along the Z-axis
perspective()	Defines a perspective view

---

Ir al índice