La animación de desplazamiento de cuadrícula de lista de perspectiva de mosaico se puede crear mediante el uso de la propiedad CSS de nth-child y una cuadrícula de visualización. Los estilos de cada elemento de columna y los efectos de desplazamiento son diferentes y este efecto brinda una apariencia de perspectiva agradable.
Acercarse:
- Cree un archivo HTML llamado index.html .
- Cree un elemento de lista ul en HTML.
- Cree algunos elementos de la lista li dentro de la ul creada en el paso anterior.
- Añadir estilos en CSS.
- Use nth-child en CSS para obtener el elemento secundario requerido de la lista y establezca los estilos en consecuencia.
- Para la apariencia en perspectiva 3D, use la propiedad de transformación en CSS y use el método de perspectiva() para lograr la apariencia.
- La función de perspectiva() de CSS define una transformación que establece la distancia entre el usuario y el plano z=0.
- Para obtener los elementos de la primera columna, se puede usar n-th-child (3n+1) , lo que significa cada tercer elemento a partir del primer elemento de la lista. De manera similar, nth-child(3n+2) y nth-child(3n+3) se pueden usar para diseñar la segunda y la tercera columna respectivamente.
- Para obtener el aspecto de la cuadrícula, se puede usar una cuadrícula de visualización para repetir 3 columnas con algún espacio de cuadrícula en el medio.
Código HTML: el siguiente código muestra el archivo index.html como se mencionó anteriormente.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<style>
* {
padding: 0;
margin: 0;
box-sizing: border-box;
background-color: #5b5b5b;
}
ul {
/* to get it in center */
position:fixed;
top:50vh;
left:50vw;
transform: translate(-50%,-50%);
list-style-type:none;
display:grid;
/* Create 3 columns */
grid-template-columns: repeat(3,16vw);
/* Give gap between the rows and columns */
gap:40px 10px;
}
li {
height: 60px;
font-size: 20px;
box-shadow: 0 0 1em rgba(0, 0, 0, 0.2);
color: white;
line-height: 60px;
transition: 0.25s;
cursor: pointer;
}
/* if it is the 1st column, set the styles accordingly */
li:nth-child(3n+1) {
background:linear-gradient(to left, #c0e218, #16c79a);
left:20vw;
text-align: right;
padding-right:30px;
transform: perspective(25em) rotateY(-45deg);
}
/* if it is the 2nd column, set the styles accordingly */
li:nth-child(3n+2) {
background:linear-gradient(to left, #c0e218, #16c79a,#c0e218);
left:20vw;
text-align: center;
}
/* if it is the 3rd column, set the styles accordingly */
li:nth-child(3n+3) {
padding-left:30px;
background:linear-gradient(to right, #c0e218, #16c79a);
left:40vw;
transform:perspective(25em) rotateY(45deg);
}
/* hover effect on column 1 */
li:nth-child(3n+1):hover {
transform:skew(15deg, 10deg) scaleY(1.4);
}
/* hover effect on column 2 */
li:nth-child(3n+2):hover {
transform:scale(1.1,1.4);
}
/* hover effect on column 3 */
li:nth-child(3n+3):hover {
transform:skew(-15deg, -10deg) scaleY(1.4);
}
</style>
</head>
<body>
<!-- sample list -->
<ul>
<li>GeeksforGeeks</li>
<li>GFG</li>
<li>GFG</li>
<li>GeeksforGeeks</li>
<li>GeeksforGeeks</li>
<li>GFG</li>
<li>GFG</li>
<li>GeeksforGeeks</li>
<li>GeeksforGeeks</li>
<li>GFG</li>
<li>GFG</li>
<li>GeeksforGeeks</li>
<li>GeeksforGeeks</li>
<li>GFG</li>
<li>GFG</li>
</ul>
</body>
</html>
Producción:
Cuadrícula de lista de perspectiva de mosaico
Publicación traducida automáticamente
Artículo escrito por vivshubham y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA