How to double layered text effect using css?

In this post, we will show you how to double layered text effect using CSS.

1. Code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content=
        "width=device-width, initial-scale=1.0" />
    <title>Double Layered Text</title>
    <style>
        body {
            background: black;
        }
        .geeks {
            text-align: center;
            margin: 200px auto 0;
            font-family: Arial, Helvetica, sans-serif;
        }
        .geeks span {
            font-size: 80px;
            font-weight: 700;
            color: green;
            position: relative;
            text-shadow: -1px 0 0 rgba(0, 0, 0, .2);
        }
        .geeks span::before {
            content: attr(data-title);
            position: absolute;
            top: 0;
            left: 0;
            transform-origin: left;
            color: #fff;
            transition: .5s cubic-bezier(
                0.175, 0.885, 0.32, 1.275);
            transform: rotateY(25deg);
        }
        .geeks span:hover::before {
            transform: perspective(1000px) rotate(-67deg);
        }
    </style>
</head>
<body>
    <div class="geeks">
        <span data-title="W">W</span>
        <span data-title="E">E</span>
        <span data-title="L">L</span>
        <span data-title="C">C</span>
        <span data-title="O">O</span>
        <span data-title="M">M</span>
        <span data-title="E">E</span>
        <span data-title="T">T</span>
        <span data-title="O">O</span>
        <span data-title="S">S</span>
        <span data-title="O">O</span>
        <span data-title="L">L</span>
        <span data-title="T">T</span>
        <span data-title="U">U</span>
        <span data-title="T">T</span>
        <span data-title="S">S</span>
    </div>
</body>
</html>

2. Approach:

The approach is to first create two layers using the before selector and then use hover selector to rotate it on mouse hover.

HTML Code: In this section, we have wrapped each alphabet in a span with a data-title attribute having the same value as of the alphabet.

CSS Code:

Step 1: Perform some basic styling like a background, font-family, font-size and adjusting text to center.
Step 2: Now use before selector with the content set as the data-title used in the span tag. This will create the second layer of the text. Make sure to provide a different color from the color given to the first layer.
Step 3: Now use some transitions to give smooth animation.
Step 4: At last, use hover selector to change perspective or in simple words rotate the second layer.

Note: Choose your degree rotation and values for transitions carefully. You can use the browser console to get the perfect values.

Complete Code: It is the combination of the above two sections of the code.

CSS