<div class="container">
  <div class="make3D" data-clones=20 >
    <span class="text">3D Text</span>
  </div>
</div>

<!-- ----------------------- -->
<a href="https://codepen.io/chandrashekhar" target="_blank" class="pens_link">
	<i class="fa-brands fa-codepen"></i>
</a>
<!-- ----------------------- -->
@import url('https://fonts.googleapis.com/css?family=Rubik+Mono+One');
$num_clones:20;
$black:#171717;
$white:#fbfbfb;
$shadow:#7c7c7c;
$background:#ebebeb;


body{
  font-family: 'Rubik Mono One', sans-serif;
  background-color: darken($background,20%);
}

.container{
  position:fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin:auto;
}
.make3D{
  position:absolute;
  top: 50%;
  left: 50%;
  transform:translate(-50%,-50%) rotateX(60deg) rotateZ(-35deg);
  //transform:translate(-50%,-50%) rotateX(40deg);
  transform-style:preserve-3d;
  animation:rotate 5s ease infinite;
  .text{
    display:inline-block;
    text-align:center;
    font-size:10rem;
    text-shadow:0px 0px 1px rgba(0,0,0,0.5);
    &:not(:first-child){
      position:absolute;
      top:0;
      left:0%;
      right:0%;
      margin:auto;
      transform-style:preserve-3d;
      color:$white;
      text-shadow:0px 0px 20px rgba($shadow,0.4);
    }
    &:first-child{
      color:$black;
    }
    &:last-child{
      text-shadow:2px 2px 10px 10px red;
    }
  }
  @for $i from 1 through $num_clones+1{
    .text:nth-child(#{$i}){
      z-index:#{-$i};
      transform:translate3d(0,0,#{-$i}px);
     
    }
  }
  
}


/********************************/
.pens_link {
 --pens-link-color:#ffffff;
  --pens-link-bgColor:#212121;
	position: fixed;
	bottom: 56px;
	right: 56px;
	margin: auto;
	display: inline-flex;
	font-size: 2rem;
	text-decoration: none;
	border-radius: 500px;
	background-color:var(--pens-link-bgColor);
	color: var(--pens-link-color);
  border:4px solid #ffffff;
	height: 56px;
	width: 56px;
	justify-content: center;
	align-items: center;
	overflow: hidden;
	animation: animate 1500ms ease infinite;
  z-index:999999;
  &:hover{
    text-decoration:none;
    color:var(--pens-link-color);
  }
	@keyframes animate {
		0%,
		100% {
			transform: translatey(-10%);
		}
		50% {
			transform: translatey(10%);
		}
	}
}
/*******************************/
View Compiled
$(document).ready(function(){
  $(".make3D").toArray().forEach(function(currentItem){
    for(var i=0;i<$(currentItem).attr("data-clones");i++){
      $(currentItem).append($(currentItem).find(".text:first-child").clone());
    }
  });
});

External CSS

  1. https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css
  2. https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js