Efecto de desplazamiento de texto 3D en puro CSS/CSS3

Vista prévia

Descripción

Un efecto de desplazamiento de texto 3D que desplaza un fragmento de texto que se muestra horizontalmente alrededor de las esquinas usando las transformaciones 3D CSS3.

Funcionamiento

Envuelva el texto en un contenedor siguiendo la estructura de marcado como esta:

<div id="marquee">

<div><span>wikicss.com: 3D Text Scrolling Effect Demo</span></div>

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

Las reglas CSS para el estilo del área de desplazamiento de texto.

#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;
}

El núcleo CSS/CSS3 para el efecto de desplazamiento 3D.

@-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;
}

Haz que se comporte como un desplazador de texto horizontal regular en dispositivos pequeños.

@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%; }
}