3D CSS

by Gopinath Kaliappan

HTML

<body >
  <div class="running-text">
      Running Text
  </div>
</body>

CSS

#fancy-frame {
  perspective: 500px;
  font-size: 6em;
}

@keyframes mymove {
     0%  { top: 0px; }
    25%  { top: 200px; }
    50%  { top: 100px; }
    75%  { top: 200px; }
    85%  { top: 1000px; }
    100% { top: 0px; }
}


#fancy {
  position: absolute;
  animation: mymove 10s infinite;
  background-color: #0df;
  width: 200px;
  height: 200px;
  transform: rotateX(20deg) rotateY(20deg) rotateZ(25deg) translate(80px, 30px);
}

#fancy div {
  margin: auto;
  text-align: center;
  position: relative;
  top: 30%;
}

body {
  background-color: green;
}

.running-text {
  animation: mymove 3s infinite;
  position: absolute;
  font-size: 80px;
  color: yellow;
  text-align: center;
}