Origen y perspectiva de las transformaciones
Cambie el punto de pivote de las transformaciones con transform-origin y añada profundidad con perspective.
Origen y perspectiva de las transformaciones es una lección gratuita de CSS Academy en CoddyKit. Esta es la lección 3 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.
Valor predeterminado de transform-origin
De forma predeterminada, las transformaciones se realizan alrededor del centro del elemento: 50% 50%. La propiedad transform-origin cambia este pivote.
Establecer transform-origin
Acepta palabras clave, porcentajes o longitudes. Formato: x-axis y-axis z-axis.
<div class="spinning-logo">Logo</div>
<div class="page-fold">Fold</div>
<div class="tooltip">Info</div>transform-origin con scale
Cambiar la escala desde la esquina superior izquierda, algo útil para las animaciones de expansión de menús desplegables:
<div class="dropdown open">Dropdown menu</div>transform-origin con rotación
Girar la aguja de un reloj alrededor de su base:
<div class="clock"><div class="hand"></div></div>Propiedad perspective
perspective establece la distancia entre el usuario y el plano z=0 para las transformaciones 3D. Los valores más pequeños crean una distorsión de perspectiva más pronunciada; los valores más grandes crean una profundidad más sutil.
<div class="scene"><div class="card">A</div></div>
<div class="scene-wide"><div class="card">B</div></div>perspective-origin
Cambia el punto de fuga de la perspectiva. El valor predeterminado es el centro (50% 50%).
<div class="scene"><div class="card">Card</div></div>perspective como función
perspective() también puede usarse como función de transformación en el propio elemento, no en el elemento principal. Esto limita el contexto 3D únicamente a ese elemento.
<div class="card">Card</div>transform-style: preserve-3d
De forma predeterminada, las transformaciones 3D de los elementos secundarios se aplanan en 2D. Establezca transform-style: preserve-3d en el elemento principal para mantener el posicionamiento 3D real de los elementos secundarios.
<div class="scene">
<div class="card-front">Front</div>
<div class="card-back">Back</div>
</div>Efecto de volteo de tarjeta
La clásica tarjeta giratoria que utiliza perspective y preserve-3d:
<div class="card-wrapper">
<div class="card"><div class="card-back">Back</div></div>
</div>
<div class="card-wrapper">
<div class="card flipped"><div class="card-back">Back (flipped)</div></div>
</div>backface-visibility
backface-visibility: hidden oculta la cara posterior de un elemento transformado en 3D. Es esencial para las tarjetas giratorias cuya parte posterior no debe verse a través del frente.
Combinar perspective y origin
Un efecto de inclinación 3D espectacular al pasar el cursor, que responde a su posición:
<div class="card demo-active">3D Tilt Card</div>Comprobación rápida
Un menú desplegable utiliza transform: scaleY(0) para ocultarse y scaleY(1) para mostrarse. ¿Qué transform-origin hace que crezca hacia abajo desde la parte superior?
Repaso
transform-origin cambia el punto de pivote de las rotaciones y los cambios de escala, algo esencial para las expansiones de menús desplegables, las agujas de reloj y las inclinaciones al pasar el cursor. perspective en el elemento principal crea el contexto de profundidad 3D. transform-style: preserve-3d permite utilizar elementos 3D anidados. backface-visibility: hidden oculta la parte posterior de los elementos en los efectos de volteo.
Preguntas frecuentes
¿La lección «Origen y perspectiva de las transformaciones» es gratis?
Sí — el texto completo de «Origen y perspectiva de las transformaciones» 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 «Origen y perspectiva de las transformaciones»?
Cambie el punto de pivote de las transformaciones con transform-origin y añada profundidad con perspective. 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 3 de 4.
¿Cuánto tiempo toma la lección «Origen y perspectiva de las transformaciones»?
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