Heute möchte ich euch zeige wie man aus einem langweiligen normalen Text einen Isometrischer Text in 3D machen kann.

Das spannende dieser 3D Text braucht keine externe Bibliotheken oder andere Zusätze sondern ist sogar eigentlich reines CSS. Da man aber mit Schatten arbeitet und ich sehr faul bin – habe ich für die Schatten ein Javascript Script geschrieben der sich darum kümmert.

In diesem Beispiel lernt ihr jetzt also nicht nur wie man mit CSS einen isometrischen Text erstellt sondern auch wie man eine Aufgabe automatisiert mit JS.

Video

HTML

1

<div id="text">Eric-Oliver Mächler</div>

Javascript

1
2
3
4
5
6
7
8

<script>
        var text = document.getElementById('text')
        var shadow = '';
        for (var i = 0; i < 20; i++) {
            shadow += (shadow ? ',' : '') + -i * 1 + 'px ' + i * 1 + 'px 0 #df4242';
        }
        text.style.textShadow = shadow;
    </script>

CSS

1
2
3
4
5
6
7
8
9
10

#text {
    position: relative;
    color: #fff;
    font-weight: 700;
    font-size: 12em;
    line-height: 1em;
    letter-spacing: 2px;
    text-align: center;
    transform: rotate(-30deg) skew(25deg);
}