Tiling Perspective List Grid Hover Animation using CSS
Tiling Perspective List Grid Hover Animation can be created by using the nth-child CSS property and a display grid. Each column element styles and hover effects are different and this effect gives a nice perspective look .
Approach:
- Create an HTML file named index.html.
- Create a ul list element in HTML.
- Create some li list elements inside the ul created in the above step.
- Add styles in CSS.
- Use nth-child in CSS to get the required child element of the list and set the styles accordingly.
- For the 3D perspective look, use the transform property in CSS and use the perspective() method to achieve the look.
- The CSS perspective() function defines a transformation that sets the distance between the user and the z=0 plane.
- To get the elements of the 1st column, nth-child(3n+1) can be used which means every third element starting from the 1st element of the list. Similarly, nth-child(3n+2) and nth-child(3n+3) can be used to style the 2nd and 3rd columns respectively.
- To get the grid look, a display grid can be used to repeat 3 columns with some grid-gap in between.
HTML code: The following code demonstrates the index.html file as mentioned above.
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> |
Output:
Tiling Perspective List Grid
.png)
