In this topic,
we are going to see how to create a 3d text animation using CSS.
let’s go
Step-1: Create Html code in the index.html file.
<body>
<div class="first-word words">
<span>T</span>
<span>H</span>
<span>E</span>
<span>C</span>
<span>O</span>
<span>D</span>
<span>E</span>
<span>H</span>
<span>U</span>
<span>B</span>
<span>S</span>
</div>
<div class="second-word words">
<span>I</span>
<span>S</span>
</div>
<div class="third-word words">
<span>B</span>
<span>E</span>
<span>S</span>
<span>T</span>
</div>
</body>
Now use CSS to show the 3D text animation.
Step-2: Add CSS in<style>…</style> tag on index.html file.
body {
background: #201b1b;
display: flex;
flex-direction: column;
height: 90vh;
justify-content: center;
align-items: center;
}
.words {
color: #201b1b;
font-size: 0;
line-height: 1.5;
}
.words span {
font-size: 5rem;
display: inline-block;
animation: move 3s ease-in-out infinite;
}
@keyframes move {
0% {
transform: translate(10%, 0);
}
50% {
text-shadow: 0 5px 25px rgba(255, 255, 255, 0.75);
}
100% {
transform: translate(30%, 0);
}
}
.words span:nth-child(1) {
animation-delay: 0.5s;
}
.words span:nth-child(2) {
animation-delay: 1s;
}
.words span:nth-child(3) {
animation-delay: 1.5s;
}
.words span:nth-child(4) {
animation-delay: 2s;
}
.words span:nth-child(5) {
animation-delay: 2.5s;
}
.words span:nth-child(6) {
animation-delay: 3s;
}
.words span:nth-child(7) {
animation-delay: 4s;
}
.words span:nth-child(8) {
animation-delay: 4.5s;
}
.words span:nth-child(9) {
animation-delay: 5s;
}
.words span:nth-child(10) {
animation-delay: 5.5s;
}
.words span:nth-child(11) {
animation-delay: 6s;
}
Review the below video.
