CSS
Tutorial CSS: Transformaciones 3D
Aprende las transformaciones 3D en CSS: perspectiva, rotaciones en ejes X, Y, Z, translate3d, scale3d y preserve-3d para efectos visuales avanzados.
Aprende CSS y certifícatePerspectiva y profundidad en transformaciones 3D
Las transformaciones 3D en CSS nos permiten manipular elementos en un espacio tridimensional, añadiendo una nueva dimensión a nuestros diseños web. Para crear efectos 3D convincentes, necesitamos entender cómo funcionan la perspectiva y la profundidad, elementos fundamentales que determinan cómo percibimos los objetos en un espacio tridimensional.
Entendiendo la perspectiva
La perspectiva en CSS define cómo percibimos la profundidad de los elementos. Funciona estableciendo una distancia virtual entre el usuario y el plano z=0 (donde se sitúan inicialmente los elementos). Esta propiedad es esencial para crear efectos tridimensionales realistas.
Podemos aplicar perspectiva de dos maneras principales:
- 1. Usando la propiedad
perspective
: Se aplica al elemento contenedor.
.container {
perspective: 1000px;
}
.box {
transform: rotateY(45deg);
}
- 2. Como función dentro de
transform
: Se aplica directamente al elemento.
.box {
transform: perspective(1000px) rotateY(45deg);
}
El valor de la perspectiva representa la distancia desde el observador al objeto. Valores más pequeños crean efectos 3D más dramáticos:
- Valores entre 500px-1000px: Efectos 3D pronunciados
- Valores superiores a 1500px: Efectos 3D más sutiles
Punto de origen de la perspectiva
Podemos controlar desde qué punto se observa el elemento 3D usando la propiedad perspective-origin
:
.container {
perspective: 1000px;
perspective-origin: center center; /* valor por defecto */
}
Esta propiedad acepta valores como:
- Palabras clave:
top
,bottom
,left
,right
,center
- Porcentajes o unidades de longitud
- Combinaciones:
top left
,25% 75%
, etc.
Veamos un ejemplo práctico que muestra diferentes orígenes de perspectiva:
.container {
perspective: 800px;
width: 200px;
height: 200px;
margin: 100px auto;
border: 1px solid #ccc;
}
.box {
width: 100%;
height: 100%;
background: linear-gradient(45deg, #ff9a9e, #fad0c4);
transform: rotateY(45deg);
transition: transform 1s ease;
}
.perspective-center {
perspective-origin: center center;
}
.perspective-top-left {
perspective-origin: top left;
}
.perspective-bottom-right {
perspective-origin: bottom right;
}
Profundidad y el eje Z
El eje Z es perpendicular a la pantalla, permitiéndonos mover elementos hacia o alejándolos del observador. Esto se logra principalmente mediante:
- La función
translateZ()
- La propiedad
transform-origin
Cuando combinamos translateZ()
con la perspectiva, podemos crear efectos de profundidad realistas:
.container {
perspective: 1000px;
}
.close {
transform: translateZ(100px); /* Parece más cercano */
}
.far {
transform: translateZ(-100px); /* Parece más lejano */
}
Un valor positivo de translateZ()
mueve el elemento hacia el observador, mientras que un valor negativo lo aleja.
Efecto de desvanecimiento por profundidad
Podemos simular el efecto natural donde los objetos parecen más pequeños a medida que se alejan usando scale
junto con translateZ
:
.card {
transform: perspective(1000px) translateZ(-100px) scale(1.1);
}
Este ajuste de escala compensa la reducción de tamaño causada por el movimiento en el eje Z, creando efectos más naturales.
Ejemplo práctico: Galería con profundidad
Veamos un ejemplo de una galería de imágenes con efecto de profundidad:
.gallery {
perspective: 1200px;
display: flex;
justify-content: center;
gap: 20px;
}
.image-card {
width: 200px;
height: 300px;
background-color: #f5f5f5;
border-radius: 10px;
box-shadow: 0 10px 20px rgba(0,0,0,0.1);
transition: transform 0.5s ease;
}
.image-card:nth-child(1) {
transform: translateZ(-50px) rotateY(-15deg);
}
.image-card:nth-child(2) {
transform: translateZ(0);
}
.image-card:nth-child(3) {
transform: translateZ(-50px) rotateY(15deg);
}
.image-card:hover {
transform: translateZ(50px) scale(1.05);
box-shadow: 0 15px 30px rgba(0,0,0,0.2);
}
Backface visibility
Cuando rotamos un elemento 180 grados, podemos ver su "parte trasera". La propiedad backface-visibility
controla si esta cara posterior es visible:
.card {
backface-visibility: hidden; /* oculta la cara posterior */
transform: rotateY(180deg);
}
Esta propiedad es especialmente útil para crear efectos de tarjetas giratorias:
.card-container {
perspective: 1000px;
width: 300px;
height: 200px;
position: relative;
}
.card {
position: absolute;
width: 100%;
height: 100%;
backface-visibility: hidden;
transition: transform 0.8s;
}
.card-front {
background-color: #f8f9fa;
}
.card-back {
background-color: #e9ecef;
transform: rotateY(180deg);
}
.card-container:hover .card-front {
transform: rotateY(180deg);
}
.card-container:hover .card-back {
transform: rotateY(0);
}
Consideraciones de rendimiento
Las transformaciones 3D pueden ser intensivas para el navegador, especialmente en dispositivos móviles. Algunas recomendaciones:
- Usa la propiedad
will-change: transform
para elementos que se animarán frecuentemente - Limita el número de elementos con transformaciones 3D complejas
- Considera usar
transform: translateZ(0)
otransform: translate3d(0,0,0)
para activar la aceleración por hardware
.optimized-element {
will-change: transform;
transform: translateZ(0); /* hack para forzar aceleración por hardware */
}
Compatibilidad entre navegadores
Aunque las transformaciones 3D tienen buen soporte en navegadores modernos, para máxima compatibilidad considera usar prefijos de proveedor en proyectos que necesiten soportar navegadores antiguos:
.container {
-webkit-perspective: 1000px;
perspective: 1000px;
}
.box {
-webkit-transform: rotateY(45deg);
transform: rotateY(45deg);
}
Las transformaciones 3D con perspectiva adecuada pueden elevar significativamente la experiencia visual de tu sitio web, creando interfaces más inmersivas y atractivas. En las siguientes secciones exploraremos cómo aplicar rotaciones específicas y otras transformaciones 3D para crear efectos aún más sofisticados.
Rotación en 3D con rotateX, rotateY y rotateZ
Las rotaciones 3D son una parte fundamental de las transformaciones tridimensionales en CSS. Nos permiten girar elementos alrededor de los tres ejes principales del espacio: X, Y y Z. Estas rotaciones son la base para crear efectos visuales dinámicos y atractivos en nuestras páginas web.
Los tres ejes de rotación
Para entender correctamente las rotaciones 3D, primero debemos visualizar los tres ejes en el espacio:
- El eje X es horizontal (de izquierda a derecha)
- El eje Y es vertical (de arriba a abajo)
- El eje Z es perpendicular a la pantalla (hacia adelante y atrás)
CSS nos proporciona tres funciones específicas para rotar elementos alrededor de estos ejes:
.element {
transform: rotateX(45deg); /* Rotación alrededor del eje X */
transform: rotateY(45deg); /* Rotación alrededor del eje Y */
transform: rotateZ(45deg); /* Rotación alrededor del eje Z */
}
Rotación en el eje X (rotateX)
La función rotateX()
gira un elemento alrededor de su eje X horizontal. Imagina una línea que atraviesa el elemento de izquierda a derecha, y el elemento girando alrededor de esa línea.
.box {
transform: rotateX(45deg);
}
Este tipo de rotación crea un efecto donde la parte superior del elemento se aleja del observador y la parte inferior se acerca:
.flip-card {
width: 200px;
height: 100px;
background-color: #3498db;
color: white;
display: flex;
align-items: center;
justify-content: center;
transition: transform 0.8s ease;
}
.flip-card:hover {
transform: rotateX(180deg);
}
Rotación en el eje Y (rotateY)
La función rotateY()
rota un elemento alrededor de su eje Y vertical. Visualiza una línea que atraviesa el elemento de arriba a abajo, y el elemento girando alrededor de esa línea.
.box {
transform: rotateY(45deg);
}
Esta rotación crea un efecto donde el lado izquierdo del elemento se acerca al observador mientras el lado derecho se aleja (o viceversa, dependiendo del ángulo):
.book-cover {
width: 150px;
height: 200px;
background-color: #e74c3c;
color: white;
display: flex;
align-items: center;
justify-content: center;
transition: transform 0.5s ease;
}
.book-cover:hover {
transform: rotateY(-30deg);
}
Rotación en el eje Z (rotateZ)
La función rotateZ()
gira un elemento alrededor de su eje Z, que es perpendicular a la pantalla. Esta rotación es similar a la rotación 2D tradicional con la función rotate()
.
.box {
transform: rotateZ(45deg);
}
De hecho, rotate()
y rotateZ()
producen el mismo resultado visual:
/* Estos dos son equivalentes */
.element-1 {
transform: rotate(45deg);
}
.element-2 {
transform: rotateZ(45deg);
}
Combinando rotaciones
Podemos combinar múltiples rotaciones en un solo elemento para crear efectos más complejos:
.cube-face {
transform: rotateX(30deg) rotateY(45deg) rotateZ(10deg);
}
El orden de las transformaciones es importante, ya que afecta al resultado final. Las transformaciones se aplican de derecha a izquierda:
/* Estas dos transformaciones producen resultados diferentes */
.element-1 {
transform: rotateX(45deg) rotateY(30deg);
}
.element-2 {
transform: rotateY(30deg) rotateX(45deg);
}
Unidades de rotación
Las rotaciones en CSS pueden especificarse en varias unidades:
- Grados (
deg
): De 0 a 360 grados - Radianes (
rad
): 2π radianes equivalen a 360 grados - Grados graduales (
grad
): 400 grados graduales equivalen a 360 grados - Vueltas (
turn
): 1 vuelta equivale a 360 grados
.box-deg {
transform: rotateY(45deg);
}
.box-rad {
transform: rotateY(0.785rad); /* Aproximadamente 45 grados */
}
.box-grad {
transform: rotateY(50grad); /* Aproximadamente 45 grados */
}
.box-turn {
transform: rotateY(0.125turn); /* Equivale a 45 grados */
}
Ejemplo práctico: Cubo 3D giratorio
Veamos cómo podemos crear un cubo 3D utilizando rotaciones en los diferentes ejes:
.scene {
width: 200px;
height: 200px;
perspective: 600px;
margin: 100px auto;
}
.cube {
width: 100%;
height: 100%;
position: relative;
transform-style: preserve-3d;
transform: translateZ(-100px);
transition: transform 1s;
}
.cube-face {
position: absolute;
width: 200px;
height: 200px;
display: flex;
align-items: center;
justify-content: center;
font-size: 40px;
font-weight: bold;
color: white;
border: 2px solid black;
}
.front {
background: rgba(255, 0, 0, 0.7);
transform: rotateY(0deg) translateZ(100px);
}
.back {
background: rgba(0, 255, 0, 0.7);
transform: rotateY(180deg) translateZ(100px);
}
.right {
background: rgba(0, 0, 255, 0.7);
transform: rotateY(90deg) translateZ(100px);
}
.left {
background: rgba(255, 255, 0, 0.7);
transform: rotateY(-90deg) translateZ(100px);
}
.top {
background: rgba(255, 0, 255, 0.7);
transform: rotateX(90deg) translateZ(100px);
}
.bottom {
background: rgba(0, 255, 255, 0.7);
transform: rotateX(-90deg) translateZ(100px);
}
.scene:hover .cube {
transform: translateZ(-100px) rotateY(45deg) rotateX(45deg);
}
Animando rotaciones 3D
Las rotaciones 3D se pueden animar para crear efectos dinámicos. Podemos usar transiciones o animaciones:
/* Con transiciones */
.card {
transition: transform 0.8s ease;
}
.card:hover {
transform: rotateY(180deg);
}
/* Con animaciones */
@keyframes spin {
0% {
transform: rotateY(0);
}
100% {
transform: rotateY(360deg);
}
}
.spinning-element {
animation: spin 4s linear infinite;
}
Ajustando el punto de origen
Por defecto, las rotaciones ocurren alrededor del centro del elemento. Podemos cambiar este punto de origen con la propiedad transform-origin
:
.box {
transform-origin: top left;
transform: rotateZ(45deg);
}
Esta propiedad acepta valores como:
- Palabras clave:
top
,bottom
,left
,right
,center
- Porcentajes o unidades de longitud
- Valores para los tres ejes:
transform-origin: x y z
.door {
width: 100px;
height: 200px;
background-color: brown;
transform-origin: left;
transition: transform 0.5s ease;
}
.door:hover {
transform: rotateY(45deg);
}
Consejos para rotaciones 3D efectivas
- Usa perspectiva: Las rotaciones 3D son más efectivas cuando se combinan con la propiedad
perspective
. - Considera la visibilidad posterior: Para elementos que rotan 180 grados, considera usar
backface-visibility: hidden
. - Prueba diferentes ángulos: A veces, pequeñas rotaciones (15-30 grados) crean efectos más sutiles y elegantes que rotaciones completas.
- Combina con otras transformaciones: Las rotaciones funcionan bien cuando se combinan con
translate
yscale
.
.card-3d {
transition: transform 0.5s ease;
}
.card-3d:hover {
transform: rotateY(15deg) rotateX(5deg) translateZ(20px) scale(1.05);
}
Las rotaciones 3D son herramientas poderosas para crear interfaces interactivas y atractivas. Experimentando con diferentes combinaciones de rotaciones en los tres ejes, puedes crear efectos visuales únicos que destaquen tu diseño web.
Transformación 3D con translate3d y scale3d
Las transformaciones 3D en CSS nos permiten manipular elementos no solo en los ejes X e Y, sino también en el eje Z, creando efectos de profundidad. Mientras que en secciones anteriores exploramos la perspectiva y las rotaciones, ahora nos centraremos en dos funciones fundamentales para el posicionamiento y dimensionamiento en el espacio tridimensional: translate3d()
y scale3d()
.
Función translate3d()
La función translate3d()
nos permite mover elementos en los tres ejes espaciales simultáneamente. Su sintaxis es:
.element {
transform: translate3d(tx, ty, tz);
}
Donde:
- tx: Desplazamiento en el eje X (horizontal)
- ty: Desplazamiento en el eje Y (vertical)
- tz: Desplazamiento en el eje Z (profundidad)
A diferencia de usar funciones individuales (translateX()
, translateY()
, translateZ()
), translate3d()
ofrece una forma más concisa de aplicar movimientos tridimensionales y además activa la aceleración por hardware en la mayoría de navegadores.
.box {
/* Estas dos declaraciones son equivalentes */
transform: translateX(20px) translateY(30px) translateZ(50px);
transform: translate3d(20px, 30px, 50px);
}
Un ejemplo práctico de uso sería crear un efecto de "flotación" al pasar el cursor:
.card {
width: 250px;
height: 350px;
background-color: #f8f9fa;
border-radius: 10px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
transition: transform 0.3s ease;
}
.card:hover {
transform: translate3d(0, -15px, 30px);
box-shadow: 0 12px 24px rgba(0, 0, 0, 0.15);
}
Este código hace que la tarjeta se eleve ligeramente y se acerque al usuario al pasar el cursor, creando una sensación de interactividad tridimensional.
Función scale3d()
La función scale3d()
nos permite cambiar el tamaño de un elemento en los tres ejes. Su sintaxis es:
.element {
transform: scale3d(sx, sy, sz);
}
Donde:
- sx: Factor de escala en el eje X
- sy: Factor de escala en el eje Y
- sz: Factor de escala en el eje Z
Un valor de 1 mantiene la escala original, valores mayores aumentan el tamaño y valores menores lo reducen. Por ejemplo:
.grow-3d {
transform: scale3d(1.2, 1.2, 1.5);
}
Este código aumenta el tamaño del elemento un 20% en los ejes X e Y, y un 50% en el eje Z.
Al igual que con translate3d()
, scale3d()
es equivalente a usar las funciones individuales:
.box {
/* Estas dos declaraciones son equivalentes */
transform: scaleX(1.5) scaleY(1.2) scaleZ(2);
transform: scale3d(1.5, 1.2, 2);
}
Combinando translate3d y scale3d
La verdadera potencia de estas funciones se aprecia cuando las combinamos para crear efectos complejos:
.interactive-element {
transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.interactive-element:hover {
transform: translate3d(0, -10px, 20px) scale3d(1.05, 1.05, 1.2);
}
Este código crea un efecto donde el elemento se eleva, se acerca al usuario y aumenta ligeramente su tamaño, todo en un movimiento fluido.
Ejemplo práctico: Galería de productos 3D
Veamos cómo podemos aplicar estas transformaciones para crear una galería de productos con efectos 3D:
.product-gallery {
display: flex;
flex-wrap: wrap;
gap: 20px;
perspective: 1000px;
}
.product-card {
width: 200px;
height: 300px;
background-color: white;
border-radius: 8px;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
overflow: hidden;
transition: transform 0.4s ease, box-shadow 0.4s ease;
}
.product-card img {
width: 100%;
height: 70%;
object-fit: cover;
}
.product-card .info {
padding: 15px;
}
.product-card:hover {
transform: translate3d(0, -15px, 40px) scale3d(1.03, 1.03, 1);
box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2);
}
Este código crea tarjetas de producto que parecen "levantarse" del plano y acercarse al usuario cuando se pasa el cursor sobre ellas.
Optimización del rendimiento
Las transformaciones 3D pueden ser exigentes para el navegador, especialmente en dispositivos de gama baja. Algunas técnicas para optimizar el rendimiento:
- Usa
will-change: transform
para elementos que se transformarán frecuentemente:
.animated-element {
will-change: transform;
}
- Aprovecha la aceleración por hardware que proporciona
translate3d()
:
/* Incluso con valores de 0, activa la aceleración por hardware */
.hardware-accelerated {
transform: translate3d(0, 0, 0);
}
- Limita el número de elementos con transformaciones 3D complejas en una misma página.
Creando interfaces de capas con translate3d
Una aplicación práctica de translate3d()
es crear interfaces de "capas" o "niveles" que dan sensación de profundidad:
.ui-container {
perspective: 1200px;
position: relative;
height: 500px;
}
.background-layer {
position: absolute;
width: 100%;
height: 100%;
background-image: url('background.jpg');
transform: translate3d(0, 0, -100px);
}
.content-layer {
position: absolute;
width: 80%;
height: 80%;
left: 10%;
top: 10%;
background-color: rgba(255, 255, 255, 0.9);
padding: 20px;
border-radius: 10px;
transform: translate3d(0, 0, 0);
}
.floating-elements {
position: absolute;
transform: translate3d(0, 0, 50px);
}
Este código crea tres capas a diferentes profundidades, generando un efecto de paralaje estático.
Efectos de hover avanzados
Podemos crear efectos de hover más sofisticados combinando translate3d()
y scale3d()
con otras transformaciones:
.feature-box {
width: 300px;
height: 200px;
background: linear-gradient(135deg, #6e8efb, #a777e3);
border-radius: 8px;
color: white;
padding: 20px;
transition: transform 0.5s cubic-bezier(0.23, 1, 0.32, 1);
overflow: hidden;
position: relative;
}
.feature-box::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(135deg, #a777e3, #6e8efb);
opacity: 0;
transition: opacity 0.5s ease;
}
.feature-box:hover {
transform: translate3d(0, -10px, 30px) scale3d(1.05, 1.05, 1) rotateX(5deg);
}
.feature-box:hover::before {
opacity: 1;
}
Este ejemplo crea una caja que no solo se eleva y escala, sino que también rota ligeramente y cambia su gradiente de color al pasar el cursor.
Compatibilidad entre navegadores
Aunque las transformaciones 3D tienen buen soporte en navegadores modernos, para proyectos que necesiten compatibilidad con navegadores más antiguos, considera usar prefijos de proveedor:
.compatible-element {
-webkit-transform: translate3d(10px, 20px, 30px) scale3d(1.1, 1.1, 1);
transform: translate3d(10px, 20px, 30px) scale3d(1.1, 1.1, 1);
}
Las funciones translate3d()
y scale3d()
son herramientas fundamentales para crear interfaces web modernas con sensación de profundidad. Combinadas con otras transformaciones y efectos CSS, pueden elevar significativamente la experiencia de usuario de tu sitio web, añadiendo dimensionalidad e interactividad a elementos que de otro modo serían planos.
Preservación del espacio 3D con transform-style: preserve-3d
Cuando trabajamos con transformaciones 3D en CSS, uno de los mayores desafíos es mantener la relación espacial entre elementos anidados. Por defecto, CSS aplana la jerarquía de elementos transformados, lo que puede arruinar nuestros efectos tridimensionales. Aquí es donde la propiedad transform-style: preserve-3d
se vuelve esencial.
El problema del aplanamiento
Por defecto, CSS utiliza un comportamiento llamado "aplanamiento" cuando aplica transformaciones 3D. Esto significa que cada elemento transformado crea su propio contexto de apilamiento independiente, ignorando el espacio 3D de su contenedor.
.parent {
transform: rotateY(45deg);
}
.child {
transform: rotateX(45deg);
}
Sin preserve-3d
, el elemento hijo no se rotará en el mismo espacio 3D que el padre. En lugar de eso, su rotación ocurrirá en un plano 2D aplanado, como si el padre nunca hubiera sido rotado.
Habilitando el espacio 3D compartido
La propiedad transform-style
tiene dos valores posibles:
.element {
transform-style: flat; /* valor por defecto */
/* o */
transform-style: preserve-3d;
}
- flat: Aplana las transformaciones (comportamiento predeterminado)
- preserve-3d: Mantiene las transformaciones en un espacio 3D compartido
Cuando aplicamos preserve-3d
a un elemento contenedor, todos sus hijos directos participarán en el mismo espacio tridimensional:
.container {
transform-style: preserve-3d;
transform: rotateY(30deg);
}
.child {
transform: rotateX(45deg);
}
En este ejemplo, la rotación del hijo ocurrirá dentro del espacio 3D ya rotado del padre, creando un efecto verdaderamente tridimensional.
Propagación y herencia
Es importante entender que transform-style
no se hereda automáticamente. Debe aplicarse a cada elemento contenedor en la jerarquía que desees mantener en 3D:
.grandparent {
transform-style: preserve-3d;
transform: rotateY(30deg);
}
.parent {
transform-style: preserve-3d; /* Necesario repetirlo aquí */
transform: rotateX(45deg);
}
.child {
transform: rotateZ(15deg);
}
Sin el transform-style: preserve-3d
en el elemento .parent
, el elemento .child
no mantendría la relación espacial 3D con el abuelo.
Ejemplo práctico: Cubo 3D anidado
Veamos un ejemplo que demuestra la importancia de preserve-3d
al crear estructuras 3D complejas:
.scene {
width: 200px;
height: 200px;
perspective: 800px;
margin: 100px auto;
}
.cube {
width: 100%;
height: 100%;
position: relative;
transform-style: preserve-3d; /* Crucial para mantener las caras en 3D */
transform: translateZ(-100px);
transition: transform 1s;
}
.face {
position: absolute;
width: 200px;
height: 200px;
background-color: rgba(141, 214, 249, 0.8);
border: 2px solid #333;
display: flex;
align-items: center;
justify-content: center;
font-size: 24px;
}
.front { transform: rotateY(0deg) translateZ(100px); }
.back { transform: rotateY(180deg) translateZ(100px); }
.right { transform: rotateY(90deg) translateZ(100px); }
.left { transform: rotateY(-90deg) translateZ(100px); }
.top { transform: rotateX(90deg) translateZ(100px); }
.bottom { transform: rotateX(-90deg) translateZ(100px); }
/* Añadimos un elemento interno a cada cara */
.inner-element {
width: 100px;
height: 100px;
background-color: rgba(255, 105, 180, 0.8);
transform: translateZ(20px) rotateX(45deg);
}
Sin transform-style: preserve-3d
en el cubo, las caras se aplanarían y no formarían un cubo real. Además, los elementos internos no mantendrían su posición 3D relativa a las caras.
Limitaciones y consideraciones
Existen algunas limitaciones importantes al usar transform-style: preserve-3d
:
- Se rompe si el elemento o cualquiera de sus ancestros tiene:
overflow
diferente avisible
filter
aplicadoclip-path
aplicadomask
aplicadoisolation: isolate
mix-blend-mode
diferente anormal
/* Esto romperá el efecto preserve-3d */
.container {
transform-style: preserve-3d;
overflow: hidden; /* ¡Problema! */
}
Estas limitaciones ocurren porque estas propiedades crean nuevos contextos de apilamiento que interrumpen el espacio 3D compartido.
Ejemplo: Carrusel 3D
Un uso común de preserve-3d
es crear carruseles 3D. Veamos un ejemplo simplificado:
.carousel {
perspective: 1000px;
width: 300px;
height: 200px;
margin: 100px auto;
position: relative;
}
.carousel-container {
width: 100%;
height: 100%;
position: absolute;
transform-style: preserve-3d;
transition: transform 1s;
}
.carousel-item {
position: absolute;
width: 280px;
height: 180px;
background-color: #f8f9fa;
border-radius: 5px;
box-shadow: 0 5px 10px rgba(0,0,0,0.2);
display: flex;
align-items: center;
justify-content: center;
font-size: 24px;
backface-visibility: hidden;
}
/* Posicionamos los elementos en un círculo 3D */
.carousel-item:nth-child(1) { transform: rotateY(0deg) translateZ(250px); }
.carousel-item:nth-child(2) { transform: rotateY(72deg) translateZ(250px); }
.carousel-item:nth-child(3) { transform: rotateY(144deg) translateZ(250px); }
.carousel-item:nth-child(4) { transform: rotateY(216deg) translateZ(250px); }
.carousel-item:nth-child(5) { transform: rotateY(288deg) translateZ(250px); }
/* Rotación del contenedor para mostrar diferentes elementos */
.carousel-container.show-1 { transform: rotateY(0deg); }
.carousel-container.show-2 { transform: rotateY(-72deg); }
.carousel-container.show-3 { transform: rotateY(-144deg); }
.carousel-container.show-4 { transform: rotateY(-216deg); }
.carousel-container.show-5 { transform: rotateY(-288deg); }
Sin transform-style: preserve-3d
en el contenedor del carrusel, los elementos no mantendrían su posición circular en el espacio 3D.
Combinación con otras propiedades 3D
Para crear efectos 3D realmente impresionantes, transform-style: preserve-3d
debe combinarse con otras propiedades:
.flip-book {
perspective: 1200px;
width: 400px;
height: 300px;
margin: 50px auto;
}
.book {
width: 100%;
height: 100%;
position: relative;
transform-style: preserve-3d;
transition: transform 1.2s;
}
.page {
position: absolute;
width: 100%;
height: 100%;
transform-origin: left center;
transition: transform 1.2s;
transform-style: preserve-3d; /* Importante para elementos anidados */
background-color: #fff;
border: 1px solid #ddd;
}
.page-front, .page-back {
position: absolute;
width: 100%;
height: 100%;
backface-visibility: hidden;
padding: 20px;
}
.page-back {
transform: rotateY(180deg);
}
/* Efecto de voltear página */
.page:hover {
transform: rotateY(-160deg);
}
Este ejemplo simula un libro con páginas que se pueden voltear. Sin preserve-3d
, las páginas no mantendrían su relación espacial con el libro.
Compatibilidad entre navegadores
La propiedad transform-style: preserve-3d
tiene buen soporte en navegadores modernos, pero para máxima compatibilidad:
.container {
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
}
Rendimiento y optimización
Las transformaciones 3D con preserve-3d
pueden ser intensivas para el navegador, especialmente con estructuras complejas. Algunas recomendaciones:
- Limita el número de elementos con transformaciones 3D anidadas
- Usa
will-change: transform
para elementos que se animarán - Considera aplicar
backface-visibility: hidden
para elementos que no necesitan mostrar su parte trasera
.optimized-3d-element {
transform-style: preserve-3d;
will-change: transform;
backface-visibility: hidden;
}
La propiedad transform-style: preserve-3d
es fundamental para crear estructuras 3D complejas en CSS. Sin ella, nuestros elementos transformados existirían en planos independientes, perdiendo la cohesión espacial necesaria para efectos tridimensionales convincentes. Dominar esta propiedad, junto con sus limitaciones, te permitirá crear experiencias web inmersivas y visualmente impactantes.
Ejercicios de esta lección Transformaciones 3D
Evalúa tus conocimientos de esta lección Transformaciones 3D con nuestros retos de programación de tipo Test, Puzzle, Código y Proyecto con VSCode, guiados por IA.
Reto modelo caja CSS
Propiedades de posicionamiento
Modelo de caja
Sombras en texto y cajas
Reto implementación de fuentes web
Sintaxis básica
Estilos de fuente
Diseño responsive con media queries
Animaciones y transiciones
Proyecto CSS Landing page simple
Reto unidades de medida
Propiedades de texto
Metodologías BEM, SMACSS, OOCSS
Herencia y cascada
Sintaxis avanzada
Reto fondos background CSS
Reto sintaxis CSS
Flexbox en diseños modernos
Elementos 'float' y 'clear'
Pseudo-clases y pseudo-elementos
Reto grid de columnas en CSS
Selectores avanzados
Reto componente responsive
Reto formulario estilizado
Proyecto CSS crear una navbar
Proyecto CSS Dashboard Responsive
Reto Flexbox Hero
Propiedades de fondo
Introducción a CSS
Reto selectores básicos CSS
Reto Flexbox Card
Reto propiedades texto
Modelo de caja
Propiedad 'display'
Variables en CSS
Grid en diseños de cuadrícula
Selectores básicos
Reto tema claro/oscuro con variables
Reto especificidad y cascada
Todas las lecciones de CSS
Accede a todas las lecciones de CSS y aprende con ejemplos prácticos de código y ejercicios de programación con IDE web sin instalar nada.
Introducción A Css
Introducción Y Entorno
Entorno Para Desarrollar Css
Introducción Y Entorno
Sintaxis
Sintaxis De Selectores Y Propiedades
Selectores Básicos
Sintaxis De Selectores Y Propiedades
Herencia Y Cascada
Sintaxis De Selectores Y Propiedades
Pseudo-clases Y Pseudo-elementos
Sintaxis De Selectores Y Propiedades
Colores En Css
Sintaxis De Selectores Y Propiedades
Unidades De Medida
Sintaxis De Selectores Y Propiedades
Especificidad
Sintaxis De Selectores Y Propiedades
Estilos De Fuente
Estilización De Texto Y Fondo
Propiedades De Texto
Estilización De Texto Y Fondo
Sombras En Texto Y Cajas
Estilización De Texto Y Fondo
Propiedades De Fondo
Estilización De Texto Y Fondo
Fuentes Web
Estilización De Texto Y Fondo
Efectos De Texto: Gradientes, Recortes
Estilización De Texto Y Fondo
Tipografía Avanzada
Estilización De Texto Y Fondo
Modelo De Caja
Modelo Caja
Propiedades De Posicionamiento
Modelo Caja
Propiedad 'Display'
Modelo Caja
Elementos 'Float' Y 'Clear'
Modelo Caja
Rellenos Y Márgenes
Modelo Caja
Bordes Y Contornos
Modelo Caja
Absolute, Fixed, Sticky Y Z-index
Posicionamiento
Flexbox Para Crear Layouts Y Estructuras
Flexbox
Css Grid Para Crear Layouts Y Estructuras
Flexbox
Propiedades Del Contenedor Flex
Flexbox
Propiedades De Los Items Flex
Flexbox
Columnas Y Filas En Grid
Css Grid
Espaciado Y Alineación
Css Grid
Tipografía Responsive
Diseño Responsive
Fundamentos Del Diseño Responsive
Diseño Responsive
Imágenes Responsive
Diseño Responsive
Funciones Matemáticas
Variables Y Funciones Css
Transformaciones 2d
Transformación, Transición, Animación
Transformaciones 3d
Transformación, Transición, Animación
Animaciones
Transformación, Transición, Animación
Transiciones
Transformación, Transición, Animación
Css Para Formularios
Css Avanzado
Accesibilidad Web Con Css
Css Avanzado
Container Queries
Css Avanzado
Selectores Avanzados
Css Avanzado
Animaciones Y Transiciones
Técnicas Modernas Y Metodologías
Variables En Css
Técnicas Modernas Y Metodologías
Diseño Responsive Con Media Queries
Técnicas Modernas Y Metodologías
Metodologías De Escritura En Css
Técnicas Modernas Y Metodologías
En esta lección
Objetivos de aprendizaje de esta lección
- Comprender el concepto de perspectiva y profundidad en transformaciones 3D en CSS.
- Aprender a aplicar rotaciones 3D usando rotateX, rotateY y rotateZ.
- Utilizar funciones translate3d() y scale3d() para manipular elementos en los tres ejes.
- Entender la importancia de la propiedad transform-style: preserve-3d para mantener el espacio tridimensional compartido.
- Conocer técnicas para optimizar el rendimiento y compatibilidad de transformaciones 3D en navegadores.