3D Text Scrolling Effect In Pure CSS / CSS3

A 3D text scrolling effect that scrolls a piece of text displayed horizontally around corners using CSS3 3D transforms.

How to use it:

Wrap your text into a container following the markup structure like this:

<div id="marquee">
  <div><span>CSSScript.com: 3D Text Scrolling Effect Demo</span></div>
  <div aria-hidden="true"><span>CSSScript.com: 3D Text Scrolling Effect Demo</span></div>
</div>

The CSS rules to style the text scrolling area.

#marquee {
  margin-top: 3rem;
  -webkit-perspective: 500px;
  perspective: 500px;
  font-size: 0;
  font-family: Agency, sans-serif;
}
#marquee div {
  display: inline-block;
  height: 12rem;
  width: 30rem;
  position: relative;
}
#marquee div:first-of-type {
  background: #e5233e;
  -webkit-transform-origin: top right;
  transform-origin: top right;
  -webkit-transform: rotateY(-40deg);
  transform: rotateY(-40deg);
  color: #fff;
}
#marquee div:last-of-type {
  background: #b31e31;
  -webkit-transform-origin: top left;
  transform-origin: top left;
  -webkit-transform: rotateY(45deg);
  transform: rotateY(45deg);
  color: #f8c9d9;
}
#marquee div {
  font-size: 8rem;
  overflow: hidden;
}
#marquee div span {
  position: absolute;
  width: 400%;
  line-height: 1.4;
}

The core CSS/CSS3 for the 3D scrolling effect.

@-webkit-keyframes 
leftcrawl {  to {
 -webkit-transform: translateX(-100rem);
 transform: translateX(-100rem);
}
}
@keyframes 
leftcrawl {  to {
 -webkit-transform: translateX(-100rem);
 transform: translateX(-100rem);
}
}
@-webkit-keyframes 
rightcrawl {  to {
 -webkit-transform: translateX(-130rem);
 transform: translateX(-130rem);
}
}
@keyframes 
rightcrawl {  to {
 -webkit-transform: translateX(-130rem);
 transform: translateX(-130rem);
}
}
#marquee div:first-of-type span {
  -webkit-transform: translateX(60rem);
  transform: translateX(60rem);
  -webkit-animation: leftcrawl 14s linear infinite;
  animation: leftcrawl 14s linear infinite;
  text-shadow: 4px 0px 4px rgba(0, 0, 0, 0.3);
}
#marquee div:last-of-type span {
  -webkit-transform: translateX(30rem);
  transform: translateX(30rem);
  -webkit-animation: rightcrawl 14s linear infinite;
  animation: rightcrawl 14s linear infinite;
}

Make it behave like a regular horizontal text scroller on small devices.

@media all and (max-width: 993px) {
#marquee {
  -webkit-perspective: none;
  perspective: none;
}
#marquee div:last-of-type {
  opacity: 0;
  height: 0;
}
#marquee div:first-of-type { width: 80%; }
}