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: