Open In App

Tiling Perspective List Grid Hover Animation using CSS

Last Updated : 25 Feb, 2021
Like Article

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 .


  • 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.


<!DOCTYPE html>
<html lang="en">
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" 
          content="width=device-width, initial-scale=1.0">
        * {
            padding: 0;
            margin: 0;
            box-sizing: border-box;
            background-color: #5b5b5b;
        ul {
            /* to get it in center */
            transform: translate(-50%,-50%);
            /* 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);
            text-align: right;
            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);
            text-align: center;
        /*  if it is the 3rd column, set the styles accordingly */
        li:nth-child(3n+3) {
            background:linear-gradient(to right, #c0e218, #16c79a);
            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 {
        /* hover effect on column 3 */
        li:nth-child(3n+3):hover {
            transform:skew(-15deg, -10deg) scaleY(1.4);
    <!-- sample list -->


Tiling Perspective List Grid

Like Article
Suggest improvement
Share your thoughts in the comments

Similar Reads