Beispielcode zur Implementierung eines 3D-Text-Hover-Effekts mit CSS3

<h1 Klasse="hover-text-3d" Datentext="w3cbest.com">W3CBEST.COM</h1>

.hover-text-3d {
    Schriftgröße: 7em;
}
.hover-text-3d {
    Position: absolut;
    oben: 50 %;
    links: 50%;
    -webkit-transform: übersetzen(-50 %, -50 %);
    -ms-transform: übersetzen(-50 %, -50 %);
    -o-transform: übersetzen(-50 %, -50 %);
    transformieren: übersetzen(-50 %, -50 %);
    -webkit-text-fill-color: #fff;
    Textfüllfarbe: #fff;
}
.hover-text-3d:vor {
    Position: absolut;
    Überlauf: versteckt;
    Breite: 0;
    Inhalt: Attr(Datentext);
    -Webkit-Übergang: 2 s;
    -o-Übergang: 2s;
    Übergang: 2s;
    -webkit-Textfüllfarbe: #aaf0d1;
    Textfüllfarbe: #aaf0d1;
    -webkit-Textstrichbreite: 2px;
    Textstrichbreite: 2px;
    -webkit-Textstrichfarbe: #aaf0d1;
    Textstrichfarbe: #aaf0d1;
    -webkit-filter: Schlagschatten(5px 5px 5px rgba(0, 0, 0, .8));
    -o-filter:schlagschatten(5px 5px 5px rgba(0, 0, 0, .8));
    Filter: Schlagschatten (5px 5px 5px rgba (0, 0, 0, .8));
}
.hover-text-3d:hover:vor {
    Breite: 100 %;
}