How to make use of it:

1. Download the package and load the ztext.min.js script within the doc.

<script src="ztext.min.js"></script>

2. Attach the function to the goal text and config the impact with the next parameters:

<h2>
  <span class="demo">CSS</span>
  <span class="demo">WCF</span>
</h2>

var ztxt = new Ztextify(".demo", {
    depth: "1rem",
    direction: "both",
    event: "none",
    eventRotation: "30deg",
    eventDirection: "default",
    fade: false,
    layers: 10,
    perspective: "500px",
    z: true,
});

3. You also can apply the impact to every character of your text utilizing data-z-OPTION attributes:

<h2>
  <span data-z data-z-layers="3" data-z-depth="0.5em">CSS</span>
</h2>

4. Apply the impact of non-text components like photos, emoji, icons, and many others.

<h2>
  <span data-z data-z-layers="3" data-z-depth="0.5em">
    // Add Image Here
  </span>
</h2>

5. Apply extra CSS classes to the impact.

.z-text {
  transform: rotateX(15deg) rotateY(-30deg);
}

.z-layer:not(:first-child) {
   color: #455a64;
}

Create 3D Interactive Typography, text Plugin/Github

See Demo And Download