Transformaciones 3D: rotateX, rotateY y translateZ
Gire y mueva elementos en un espacio tridimensional mediante funciones de transformación 3D de CSS.
Transformaciones 3D: rotateX, rotateY y translateZ es una lección gratuita de CSS Academy en CoddyKit. Esta es la lección 4 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de CSS Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de CSS Academy incluye 4 lecciones en total.
Descripción general de las transformaciones 3D
Las transformaciones 3D de CSS amplían el sistema 2D a una tercera dimensión mediante el eje Z. Active el 3D con perspective en el elemento principal y transform-style: preserve-3d para los elementos 3D anidados.
rotateX()
rotateX(angle) gira un elemento alrededor del eje X horizontal, como al voltear una página hacia usted o alejándola de usted.
<div class="page"><div class="leaf">Leaf</div></div>rotateY()
rotateY(angle) gira alrededor del eje Y vertical, como una puerta sobre sus bisagras.
<div class="card-flip demo-active"><div class="card">Card</div></div>rotateZ()
rotateZ(angle) es idéntica a la función 2D rotate(): gira en el plano de la pantalla.
rotate3d()
rotate3d(x, y, z, angle) gira alrededor de un vector de eje 3D personalizado. Los valores x, y y z definen la dirección del eje.
<div class="element">3D</div>translateZ()
translateZ() mueve un elemento hacia el observador o lo aleja de él a lo largo del eje Z. Los valores positivos lo acercan; los negativos lo alejan.
<div class="scene-z">
<div class="layer-front">Front</div>
<div class="layer-back">Back</div>
</div>translate3d()
translate3d(x, y, z) mueve un elemento a lo largo de los tres ejes a la vez. Usar translateZ(0) fuerza la promoción a una capa de la GPU, un truco habitual de rendimiento.
<div class="animated">GPU layer</div>scale3d()
scale3d(x, y, z) cambia la escala en tres dimensiones. scaleZ() cambia la escala de la profundidad, algo útil para las caras de un cubo 3D.
Ejemplo de cubo 3D
Construcción de un cubo mediante transformaciones 3D en seis caras:
<div class="cube-scene">
<div class="cube">
<div class="cube-face front">Front</div>
<div class="cube-face back">Back</div>
<div class="cube-face left">Left</div>
<div class="cube-face right">Right</div>
<div class="cube-face top">Top</div>
<div class="cube-face bottom">Bottom</div>
</div>
</div>Efecto 3D de paralaje
Usar translateZ en elementos secundarios crea profundidad en una escena 3D desplazable (paralaje con CSS):
<div class="parallax-scene">
<div class="far-layer">Far layer</div>
<div class="close-layer">Close layer</div>
</div>Aceleración por hardware
Las transformaciones 3D, incluso las triviales como translateZ(0), fuerzan al elemento a utilizar su propia capa de GPU. Esto evita el pintado durante la animación, pero consume memoria de la GPU. Úselo intencionadamente, no como un truco universal.
Comprobación rápida
¿Qué función de transformación mueve un elemento a lo largo del eje Z, hacia el observador o alejándolo de él?
Repaso
Las transformaciones CSS 3D utilizan rotateX/Y/Z() para girar alrededor de cada eje y translateZ() para mover en profundidad. Active el 3D real con perspective en el elemento principal y transform-style: preserve-3d. Use backface-visibility: hidden para los efectos de volteo. Las transformaciones 3D fuerzan la promoción a una capa de GPU para lograr animaciones fluidas.
Preguntas frecuentes
¿La lección «Transformaciones 3D: rotateX, rotateY y translateZ» es gratis?
Sí — el texto completo de «Transformaciones 3D: rotateX, rotateY y translateZ» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de CSS Academy, actualiza a CoddyKit PRO. El curso de CSS Academy incluye 4 lecciones en total.
¿Qué aprenderé en «Transformaciones 3D: rotateX, rotateY y translateZ»?
Gire y mueva elementos en un espacio tridimensional mediante funciones de transformación 3D de CSS. Practicas CSS Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.
¿Necesito experiencia previa para empezar CSS Academy?
No se requiere experiencia previa. CSS Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 4 de 4.
¿Cuánto tiempo toma la lección «Transformaciones 3D: rotateX, rotateY y translateZ»?
La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.
¿Puedo escribir y ejecutar código en esta lección de CSS Academy?
Sí. Cada lección de CSS Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.
Todas las lecciones de este curso
- Translate, Rotate y Scale
- Transformaciones Skew y Matrix
- Origen y perspectiva de las transformaciones
- Transformaciones 3D: rotateX, rotateY y translateZ