Tiling Perspective List Grid Hover Animation using CSS

Last Updated : 25 Feb, 2021

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>