3D marquee effect using CSS

Hello 👋 my fellow developers. Today we will learn how to create a 3D marquee text effect using CSS.

As a web developer, you know that adding animation to your website is an important way to engage visitors.

Also Read – Beautiful animated search bar using CSS

One way to do this is by using CSS to create eye-catching text effects. In this post, we’ll explore how to create a 3D text marquee effect using CSS. This effect is perfect for grabbing attention and making your website stand out.

We’ll provide you with step-by-step instructions to help you get started.

Whether a beginner or an experienced developer, this post has something for you. Get ready to add some depth to your text with this cool 3D marquee effect!

HTML

As always we will start by writing some HTML code.

<div class="box">
  <div class="inner">
    <span>Hello World</span>
  </div>
  <div class="inner">
    <span>Hello World</span>
  </div>
</div>

In the above code, we are creating a 3d box with div tags.

CSS

Now let’s animate it using CSS.

html,
body {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: navajowhite;
}

.box {
  display: flex;
}

.box .inner {
  width: 400px;
  height: 200px;
  line-height: 200px;
  font-size: 4em;
  font-family: sans-serif;
  font-weight: bold;
  white-space: nowrap;
  overflow: hidden;
}

.box .inner:first-child {
  background-color: indianred;
  color: darkred;
  transform-origin: right;
  transform: perspective(100px) rotateY(-15deg);
}

.box .inner:last-child {
  background-color: lightcoral;
  color: antiquewhite;
  transform-origin: left;
  transform: perspective(100px) rotateY(15deg);
}

.box .inner span {
  position: absolute;
  animation: marquee 5s linear infinite;
}

.box .inner:first-child span {
  animation-delay: 2.5s;
  left: -100%;
}

@keyframes marquee {
  from {
    left: 100%;
  }

  to {
    left: -100%;
  }
}

In the above code, we are aligning and animating the text.

There you have a 3D marquee effect using pure CSS.