Spanish (Español) translation by Andrea Jiménez (you can also view the original English article)
Para este tutorial, nos inspiramos en la última iniciativa de Envato; Envato Elements. La página de inicio de Elements presenta una gama de productos creativos (fuentes, iconos, plantillas gráficas, entre otros) que los muestran juntos en un diseño de cuadrícula isométrica ordenada.
Vamos a recrear este paisaje isométrico usando CCS transformaciones 3D.
Proyección isométrica
La “proyección isométrica” es un método (comúnmente usado en ingeniería y juegos en los años 80 y 90 donde la potencia de procesamiento 3D era muy limitada) para presentar un diseño en aparentes tres dimensiones.
Estas no son tres dimensiones como las experimentamos en la vida real; el plano en el que se muestran carece de perspectiva.
El eje Z
Durante muchos años, la web ha sido un entorno bidimensional y estamos acostumbrados a posicionar elementos a lo largo de dos ejes o direcciones: el eje x (horizontal) y el eje y (vertical).
Nota: el eje y de la web se invierte en contra del principio de coordenadas cartesianas original, ya que la web se lee de arriba a abajo.
El tercer eje, a saber, el eje z, es necesario para proyectar una vista 3D. Este eje representa la profundidad, y la dirección de movimiento de un objeto a lo largo del eje z es relativa a nuestro punto de vista; puede moverse de arriba a abajo, de un lado a otro o cerca y lejos.
Estos tres ejes se pueden aplicar a la función Transformación CSS para crear una proyección 3D. En la siguiente demostración, usamos las funciones rotateX(), rotateY() y rotateZ() para crear una proyección isométrica de un rectángulo:
Ya que tenemos el principio básico que subyace a una proyección isométrica, podemos ponerlo en práctica. Y empezamos con el HTML.
HTML
De manera similar a la página de inicio de Envato Elements, tenemos un diseño de cuadrícula. Nuestra cuadrícula consta de una fila con nueve columnas. Cada columna contiene una imagen del producto, el enlace que apunta a la página del producto y, como puedes ver a continuación, un elemento span que usaremos para modelar la sombra de la imagen.
1 |
<div class="row"> |
2 |
<div class="column"> |
3 |
<div class="ItemCard"> |
4 |
<a class="ItemCard__dest cover" href="https://elements.envato.com/items/type/fonts/herbert-lemuel-GHH8KT" target="_blank"></a> |
5 |
<figure class="ItemCard__thumb"> |
6 |
<img src="./images/001.jpg" height="340" width="510" alt=""> |
7 |
<span class="shadow cover"></span> |
8 |
</figure>
|
9 |
</div>
|
10 |
</div>
|
11 |
<div class="column"> |
12 |
<div class="ItemCard"> |
13 |
<a class="ItemCard__dest cover" href="https://elements.envato.com/items/type/add-ons/roller-paint-brush-EZ9ZVZ" target="_blank"></a> |
14 |
<figure class="ItemCard__thumb"> |
15 |
<img src="./images/002.jpg" height="340" width="510" alt=""> |
16 |
<span class="shadow cover"></span> |
17 |
</figure>
|
18 |
</div>
|
19 |
</div>
|
20 |
<!-- 7 more items... -->
|
21 |
</div>
|
CSS
Comenzamos con la fila y las columnas.
1 |
.row { |
2 |
width: 960px; |
3 |
display: flex; |
4 |
flex-wrap:wrap; |
5 |
justify-content:flex-end; |
6 |
transform-style:preserve-3d; |
7 |
transform: rotateX(60deg) rotateY(0deg) rotateZ(-45deg); |
8 |
}
|
9 |
.column { |
10 |
padding:20px; |
11 |
width:50%; |
12 |
max-width: 50%; |
13 |
flex: 1 1 50%; |
14 |
}
|
Los estilos anteriores configuran la fila en display: flex, configura los estilos de transformación en 3D para que los navegadores se adhieran correctamente a la transformación del eje z, roten la fila para crear una vista isométrica y, por último, dividan las columnas dentro de la fila por la mitad .
Luego, agregamos estilos a la clase .cover, que agregamos a la etiqueta de anclaje del vínculo del producto y al elemento span (que pronto será la sombra).
1 |
.cover { |
2 |
position:absolute; |
3 |
top:0; |
4 |
left:0; |
5 |
|
6 |
width:100%; |
7 |
height:100%; |
8 |
}
|
Una vez agregado este estilo, el enlace del producto y el elemento span ahora se extienden por todo el contenedor. También podemos cambiar la posición de la pila de elementos más adelante.
Estilos de imagen
Los siguientes estilos controlan la posición del elemento contenedor de imágenes, el relleno y algunas cosas 3D. El backface-visibility está configurado para que no veamos a través de la pila debajo del elemento trasladado o girado, y no veremos la cara invertida de la imagen.
Aplicamos la transición a la imagen y nos movemos a través del eje z para hacer que “levite” por encima de la sombra en 15px. Del mismo modo, también agregamos algunas cosas en 3D: backface-visibility y transform-style, por lo que renderizará la vista 3D correctamente.
1 |
.ItemCard__thumb { |
2 |
position:relative; |
3 |
|
4 |
padding:0; |
5 |
|
6 |
backface-visibility:hidden; |
7 |
transform-style:preserve-3d; |
8 |
}
|
9 |
.ItemCard__thumb img { |
10 |
display:block; |
11 |
cursor: pointer; |
12 |
|
13 |
transition:transform .3s cubic-bezier(.165, .84, .44, 1); |
14 |
transform:translate3d(0,0,15px); |
15 |
|
16 |
border-radius:6px; |
17 |
backface-visibility:hidden; |
18 |
transform-style:preserve-3d; |
19 |
}
|
Estilos de sombra
Lo siguiente nos da nuestros estilos de sombra. La extensión de la sombra debe ser estrecha y el tono de la sombra más oscuro, ya que la imagen, en este punto, está más cerca (por 15px) del "piso" donde se refleja la sombra.
1 |
.shadow { |
2 |
display:block; |
3 |
transition:all .3s cubic-bezier(.165, .84, .44, 1); |
4 |
border-radius:6px; |
5 |
opacity:.9; |
6 |
background-color:rgba(0,0,0,.12); |
7 |
box-shadow:0 0 5px 1px rgba(0,0,0,.12); |
8 |
}
|
Hemos hecho bastantes progresos:
Efecto Hover
El efecto hover hará que cada miniatura de la imagen sea más atractiva.
1 |
.column:hover .ItemCard__dest, |
2 |
.column:hover .ItemCard__thumb { |
3 |
z-index: 10; |
4 |
}
|
5 |
.column:hover .ItemCard__dest, |
6 |
.column:hover .ItemCard__thumb img { |
7 |
transform: translate3d(0, 0, 50px) rotateX(-5deg); |
8 |
transform-origin: center bottom; |
9 |
}
|
10 |
.column:hover .ItemCard__thumb .shadow { |
11 |
opacity: .6; |
12 |
background-color: rgba(0, 0, 0, 0.1); |
13 |
box-shadow: 0 0 10px 6px rgba(0, 0, 0, 0.1); |
14 |
}
|
En el estado hover, como se muestra en el fragmento de código anterior, primero moveremos la pila de elementos hacia arriba, por lo que la imagen (y el enlace) aparecerán sobre el resto de los elementos dentro de la cuadrícula.
También levantaremos ligeramente la imagen; alejándola del "suelo" y acercándola un poco más a la fuente de "luz". Dicho esto, la sombra debería perder algo de claridad, así que disminuimos la opacidad de las sombras.
Terminando
En este tutorial, utilizamos transformaciones 3D en CSS para crear una réplica de la cuadrícula isométrica de Envato Elements. También aprendimos cómo agregar realismo en términos de sombras y fuentes de luz. ¡Revisa la demostración, toma los archivos de origen y háznos saber qué haces con ellos!
Las transformaciones 3D son una poderosa utilidad CSS. Pero no los consideres simplemente un truco o un juguete para agregarle una capa elegante a la web. Si se aplican cuidadosamente, los elementos 3D también pueden resolver algunos problemas de diseño notorios.
Más recursos
By
