Create 3D Interactive Typography With JavaScript And CSS3 – ztext.js

Category: Animation , Javascript , Recommended , Text | September 25, 2020
Views Total:332 views
Official Page:Go to website
Last Update:September 25, 2020


Create 3D Interactive Typography With JavaScript And CSS3 – ztext.js


ztext.js is a fancy JavaScript library to create 3D interactive typography using CSS3 transform-style property.

Not only text, the library also supports images, SVGs, emoji, and even iconic font.

How to use it:

1. Download the package and load the ztext.min.js script in the document.

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

2. Attach the function to the target text and config the effect with the following parameters:

  • depth: The depth of the effect on the z-axis
  • direction: “both”, “backwards”, or”forwards”
  • event: “none”, “pointer”, “scroll”, “scrollX”, or “scrollY”
  • eventRotation: The maximum rotation to be applied
  • eventDirection: “default” or “reverse”
  • fade: Fade away the text
  • layers: The number of layers that make up the effect
  • perspective: Set distance from the viewer
  <span class="demo">CSS</span>
  <span class="demo">Script</span>
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 can also apply the effect to each character of your text using data-z-OPTION attributes:

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

4. Apply the effect to non-text elements like images, emoji, icons, etc.

  <span data-z data-z-layers="3" data-z-depth="0.5em">
    <img src="image.jpg" alt="Image Alt">

5. Apply additional CSS classes to the effect.

.z-text {
  transform: rotateX(15deg) rotateY(-30deg);
.z-layer:not(:first-child) {
   color: #455a64;

You Might Be Interested In:

Leave a Reply