Design, Interaction, Code & Teaching

013 CSS3-Transform: verschieben, drehen, skalieren und verzerren – CSS3-Animations Part II

css3-transform-skizze

Schriften senkrecht setzen, Parallelogramme, Sterne und andere Shapes nur aus HTML-Elementen erstellen und Bewegungseffekte für Transitions und Animations – im zweiten Teil der Serie erkläre ich, wie ihr mit CSS3-Transform-Styles HTML-Elemente visuell verändern. In den Beispielen zeige ich insbesondere wie ihr Transforms mit Transitions kombiniert, um den klassischen 3D-Flipped-Image-Effekt zu erzeugen, und wie ein Bildermenü mit der Maus aufgedeckt wird.

    CSS3-Transform

  1. Transform verstehen
  2. Transform Code-Pattern
  3. 2D-Transform
  4. 3D-Transform
  5. 3D-Transform und Hardware-Rendering
  6. 3D-Transform und unscharfe Fonts
  7. Beispiel: 2D-Transform Menü Bilder aufdecken
  8. Beispiel: 3D-Transform Flipped Image Effekt
  9. Fazit

Beispiele und Code (auch Demos)
2D-TransformMenü
3D-Flipped-Image-Effekt
Download Code Beispiele & Demos

Transform verstehen

Es gibt zwei 2D- und 3D-Transforms. Die HTML-Elemente werden im entsprechenden Koordinatensystem angeordnet. Die Transformation hat keine Auswirkung auf den Flow der restlichen HTML-Elemente. Ein mit CSS-Transforms verändertes Element verschiebt keine Elemente im HTML-Flow, sondern überlagert diese ähnlich der relativ absoluten Positionierung. Der freie Platz für transformierte Elemente sollte also vorher bedacht werden.

Vendor-Prefixes

CSS3-Transform Eigenschaft gelten die Vendor-Prefix-Regeln wie bei CSS3-Transitions. Sogar der Internet Explorer 9 stellt 2D-Transforms mit dem Vendor-Prefix -ms richtig dar. Ihr müsst also immer fünf Versionen mit -webkit, -moz, -o und ohne Prefix für die unterschiedlichen Browser notieren. Ich schreibe in den Beispielen nur das Prefix -webkit für Safari und Chrome.

Browser-Support

2D-Transforms sind in modernen Browsern Standard.

Bei 3D-Transforms wird die Luft etwas dünner. Der neue Internet Explorer 10 unterstützt nur teilweise 3D-Transforms und Internet Explorer 9 / Opera noch gar nicht. Für Apps auf iOS oder Android können und sollten wegen des Hardware-Renderings 3D-Transforms eingesetzt werden. Die Erklärung folgt unten.

Transform Code-Pattern

Schlüsselwort transform, dann die Funktion mit den Werten in Klammern.

1
2
3
4
    -webkit-transform: rotate(45deg); /* chrome & safari*/
    -moz-transform: rotate(45deg); /* firefox */
    -o-transform: rotate(45deg); /* opera */
    transform: rotate(45deg); /* explorer > 9 */

Mehrere Transforms können mit einem Space getrennt direkt hintereinander notiert werden.

1
    -webkit-transform: rotate(45deg) scale(5);

Bedeutet: Drehe das Element um 45° und verkleinere es um 50%.

2D-Transform

css3-transform-boxes

Demo: 2D-Transforms

Verzerren – skew

Werte von 0 bis 180deg – auch negativ, entweder ein gemeinsamer Wert für die x- und y-Achse oder zwei Werte mit einem Komma getrennt.

1
2
3
    .skew {
        -webkit-transform: skew(35deg); /* Parallelogramm */
    }

Vergrößern – scale

Mit einem Wert wird proportional skaliert, zwei Werte für Länge und Breite. Der Wert von 1 steht für 100%, hat also keinen Skalierungseffekt. Entsprechend verkleinert der Wert 0.5 um 50% und vergrößert der Wert 2 um 200%.

1
2
3
    .scale {
        -webkit-transform:scale(1,0.5); /* unproportionale Skalierung */
    }

Drehen – rotate

Werte von 0 bis 360°

1
2
3
    .rotate {
        -webkit-transform:rotate(45deg);
    }

Verschieben – translate

Positioniert das Element, um n-Pixel nach rechts und unten, negative Werte nach links und oben.

1
2
3
    .translate {
        -webkit-transform:translate(10px, 20px);
    }

Transform oder klassisches CSS verwenden?

Manchmal ist beides möglich: Positionieren mit transform: translate(x,y) oder mit relativ-absoluter Positionierung top/left. Die Größe eines Elementes ändern mit transform: scale(n) oder mit width/height, wobei scale zentrisch vergrößert und width/height das Element verlängert. Rotieren, Verzerren oder 3-dimensionale Veränderungen sind nur mit CSS-Transforms möglich.

3D-Transform

Ich kann mir nur schwer 3-dimensionale Objekte vorstellen. Dazu fehlt mir einfach die Übung. 3D-Transforms sind in den Möglichkeiten beschränkt und etwas umständlich. Vorweg: Es können keine 3D-Objekte aus anderen Programmen implementiert werden (dafür braucht ihr Web-GL – Web Graphics Library). Es werden 2D-HTML-Elemente im 3D-Koordinatensystem angeordnet. Die Perspektive bestimmt wie die verschiedenen HTML-Elemente in Bezug auf einen Fluchtpunkt verzerrt werden.

Immer die Perspektive im Elternelement anstellen

Die erste Regel für 3D-Transforms: Im Elternelement mit *transform-perspective(500px) die Fluchtpunktperspektive definieren, damit alle Kindelemente einen gemeinsamen Fluchtpunkt haben.

css3-transform-perspective
Demo: 3D-transform-perspective

Alle Boxen wurden um 45° um die Y-Achse gedreht. Die Boxen in der ersten Reihe haben keinen gemeinsam definierten Fluchtpunkt im Elternelement. In der zweiten Reihe richten sich alle Boxen zu einer Fluchtpunktperspektive aus.

Weitwinkel oder Tele einstellen – perspective

Die CSS-Egenschaft perspective: 100 bestimmt den Winkel der Perspektive mit sinnvollen Werten zwischen 100 bis 2000: 100 entspricht extremer Weitwinkelperspektive mit stürzenden Linien und 2000 eine verjüngende Teleperspektive.

1
2
3
    .perspective {
        -webkit-perspective: 300;
    }

Fluchtpunkt verschieben – Perspective-origin

Die CSS-Eigenschaft perspective-origin: 20% 80% verschiebt den Fluchtpunkt am Horizont. Hier können absolute Werte (100px 200px) oder relative Werte angegeben Werten (20% 70%).

Perspective-origin kann auch im 2D-Raum definiert werden. Dann verschiebt sich der Mittelpunkt, um den gedreht, skaliert oder rotiert wird.

1
2
3
    .perspective {
        -webkit-perspective-origin: 20% 80%;
    }

3D-Transform Shortcut translate3d, scale3d, rotate3d

3D-Tranforms werden im CSS genauso wie 2D-Transforms notiert. Die Shortcut-Form bietet sich an, wenn mindestens zwei Raumkoordinaten gesetzt werden.

css3-transform-3d-shortcuts
Demo: 3D-Transform Shortcut

1
2
3
4
5
    .3d-transforms {
        -webkit-tranform: translate3d( tx, ty, tz );
        -webkit-tranform: scale3d( sx, sy, sz );
        -webkit-tranform: rotate3d( vektor-1, vektor-2,vektor-3, angle );
    }

rotate3d: Element im Raum rotieren. Der 3D-Effekt ist offensichtlich.
translate3d: Element bewegen. Der 3D-Effekt wird erkennbar bei einem negativen Wert für z-Achse. Die Box ist perspektivisch verkleinert.
scale3d: Element skalieren – kein sichtbarer 3D-Effekt

3D-Tranform Longform

ist selbsterklärend: Jede Achse kann individuell bestimmt werden.

1
2
3
4
5
6
7
8
9
10
11
12
13
.3d-transforms {
        -webkit-tranform: translateX(x);
        -webkit-tranform: translateY(y);
        -webkit-tranform: translateZ(z);

        -webkit-tranform: scaleX(angle);
        -webkit-tranform: scaleY(angle);
        -webkit-tranform: scaleZ(angle);

        -webkit-tranform: scaleX(angle);
        -webkit-tranform: scaleY(angle);
        -webkit-tranform: scaleZ(angle);
    }

Sichtbarkeit der Rückseite ausstellen – backface-visibility

Ein um 180° um die x- oder y-Achse gedrehtes HTML-Element zeigt logischerweise die Rückseite an, und zwar verdreht. Das ist bei Effekten wie im Beispiel 3D-Flipped-Image ein Problem, weil auf der Rückseite ein anderes Bild bzw. andere HTML-Box angezeigt werden soll. Mit der CSS-Eigenschaft backface-visibility: hidden kann die Sichtbarkeit der Rückseite ausgestellt werden.

1
2
3
    .3d-transforms {
        -webkit-backface-visibility: hidden /* voreingestellt: visible*/
    }

Kindelemente auch 3D-Rendern – transform-style: preserve-3d

Mit der CSS-Eigenschaft transform-style: preserve-3d werden auch alle verschachtelten Elemente dreidimensional dargestellt. Voreingestellt ist transform-style: flat – keine 3D-Darstellung der Kindelemente.

css3-transform-3d-preserve3d

Demo 3D-Transform transform-style: preserve-3d

1
2
3
    .3d-transforms {
        -webkit-transform-style: preserve-3d /* voreingestellt: flat */;
    }

3D-Transform Hardware-Rendering bei stockenden Animationen

Wenn 2D-Transitions stocken oder Key-Frame-Animations ruckeln, hat der Browser Performanceprobleme. Jedes Zwischenbild einer Animation muss einzeln berechnet werden und bei vielen Elementen kann das an die Leistungsgrenze des Browsers gehen.

Nun werden aber 3D-Transforms nicht vom Browser berechnet, sondern von der Grafikkarte des Computers. 3D-Transforms sind also wesentlich performativer. Deswegen ist ein bewährter Trick über -webkit-tranform: translateZ(0) dieses Hardware-Rendering einzustellen. Bei CSS3-Transforms auf iOS oder Android ist das ein Standardtrick für flüssige Transitions.

3D-Transform und unscharfe Fonts

Verschwommener Text ist der Preis für die Performanceverbesserung. Der Font und auch Bilder werden für das Transformieren in Texturen umgewandelt. Texturen sind Pixelbilder. Pixelbilder verschwimmen, wenn diese vergrößert werden und bei Typo ist das besonders auffällig! Hier also die Qual der Wahl: schnelle 3D-Transforms mit verschwommener Schrift oder langsamere 2D-Transforms.

Beispiel: 2D-Transforms Menü mit verdeckten Bilder aufdecken

css3-translate-transform-menu

Demo 2D-Transform Menü

Die Menü-Idee: Was versteckt sich hinter dem Kreis? Der User kann mit der Maus das Bild aufdecken. Der Kreis bewegt sich ziehend nach oben, gibt das Bild frei – ein Text wird eingeblendet. Da in dieser Transition gleich drei CSS-Eigenschaften verändert werden, wirkt die kleine Animation recht komplex.

HTML: Ein Kreis besteht aus zwei verschachtelten DIVs. Das DIV.bg-cirlce ist der Container für das Bild und das DIV.tr-circle ist der rote Kreis mit der Schrift, der nach oben bewegt wird. Das Ganze viermal.

Mit einem kleinen Javaschnipsel kann das Bild verlinkt werden. Die Raute # muss durch eine URL ersetzt werden.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
    <div>
        <!-- Kreis 1 -->
        <div class="bg-circle" onclick="location.href='#'">
            <div class="tr-circle">TIME</div>
        </div>
        <!-- Kreis 2 -->
        <div class="bg-circle" onclick="location.href='#'">
            <div class="tr-circle">LOVE</div>
        </div>
        <!-- Kreis 3 -->
        <div class="bg-circle" onclick="location.href='#'">
             <div class="tr-circle">PEACE</div>
        </div>
        <!-- Kreis 4 -->
        <div class="bg-circle"  onclick="location.href='#'">
            <div class="tr-circle">MONEY</div>
        </div>
    </div>

Kreis 1 für das Bild: Der Kreis DIV.bg-circle erhält die CSS-Eigenschaft position: relative, damit der innere rote Kreis absolut positioniert werden kann. Die vier Kreise sollen nebeneinander stehen, also einfach float: left. Der Shape Kreis wird mit einem border-radius: 75px halb so groß wie die Größe width: 150px angelegt. Overflow:hidden schneidet jeden Content ab, der über die Box fließen würde. In diesem Fall für die Bilder, die mit einer weiteren CSS-Class später als Hintergrundbild zugefügt werden.

1
2
3
4
5
6
7
8
9
    .bg-circle {
        position: relative;
        float: left;
        margin:  200px 25px 0 25px;
        width: 150px; height:150px;
        background:black;  
        overflow:hidden;
        -webkit-border-radius: 75px;
    }

Roter Kreis 2 für die Bewegung: Diese Box DIV.tr-circle wird mit left: 0; top:0 absolut links oben an DIV.bg-circle positioniert – verdeckt also den Kreis für das Bild. Den Border-Radius-Trick für die Kreisform kennen wir bereits und ein paar CSS-Eigenschaften für die Schriftformatierung. Dann die entscheidende CSS-Transition, die die CSS-Eigenschaften animiert.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
    .tr-circle {
        position: absolute;
        left: 0; top:0;
        height: 100%; width:100%;
        background: red;
   
        color: red;
        font-weight:bold;
        letter-spacing: 3px;
        line-height: 145px;
        text-align: center;

        -webkit-border-radius: 75px;
        -webkit-transition: all .55s ease-in-out 0s;
    }

Die Bewegung: Die Transition wird mit einem MouseOver auf der Box DIV.bg-circle:hover ausgelöst. Verändert werden die CSS Eigenschaften des roten Kreises DIV.tr-circle: Der Kreis bewegt sich nach oben transform:translate(0,-151px), die Hintergrundfarbe blendet von Rot zu Weiss und die Textfarbe von Rot zu Schwarz.

1
2
3
4
5
    .bg-circle:hover .tr-circle {
        -webkit-transform:translate(0,-151px);
        background:white;
        color: black;      
    }

Die Bilder in den Kreisen: Jeder Kreis DIV.bg-circle bekommt ein individuelles Bild: vier Classes mit jeweils ein Hintergrundbild.

Beispiel: 3D-Transforms Flipped Image Effekt

css3-flipping-card-animation

Demo: 3D-Transform Flipped Image-Effekt

Die Idee: Bei MouseOver dreht sich die Karte um die eigene Achse – die Rückseite kommt zum Vorschein. Auf dem iPhone wird dieser Effekt für die Nutzerführung eingesetzt, zum Beispiel dreht sich die gesamte Page, um Konfigurationseinstellungen für Apps anzuzeigen. Im folgenden Beispiel drehen wird einfach eine Fläche um 180° bei MouseOver gedreht.

Der Effekt ist recht simpel und beruht auf eine dreifache Verschachtelung von HTML-Boxen

  1. Erster Level: Container für das MouseOver mit :hover
  2. Zweiter Level: Container für die Vorder- und Rückseite, der sich um 180° mit einer Transition dreht.
  3. Dritter Level: Die Vorder- und Rückseite der Karte genau übereinandergelegt.

HTML: Die verschachtelten DIVs

1
2
3
4
5
6
    <div class="card">
        <div class="tr-flip">
            <div class="backSide">hinten</div>
            <div class="frontSide">vorn</div>
        </div>
    </div>

Dann geht’s weiter mit CSS.

1
2
3
4
5
6
7
    body {
        width: 160px;
        margin: 100px auto;
        font-family: helvetica;
        color: white;
        font-size: 16px;
    }

Basiseinstellung für das Dokument: Auf der Seite zentrieren mit Randabstand und die Einstellungen für Schrift.

1
2
3
4
5
6
    .card {
        position: relative;
        width: 240px; height: 240px;
        border: 1px solid grey;
        overflow:hidden
    }

Erster Level: Der äußere Container .card mit Größenangaben und vor allem position: relative, damit die inneren DIVs absolut positioniert werden können.

1
2
3
4
5
6
7
    .card .tr-flip {
        -webkit-transition: all 0.75s;
        -webkit-transform-style: preserve-3d;
    }
    .card:hover .tr-flip {
        -webkit-transform: rotateY(180deg);
    }

Zweiter Level mit der Box DIV.tr-flip für die 180° Drehung. Wichtig hier: transform-style: preserve-3d definieren, dass die Kindelemente auch im 3D-Raum ausgerichtet werden.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
    .card .backSide,
    .card .frontSide {
        position: absolute;
        top: 0; left: 0;
        width: 240px; height:240px;
        text-align:center;
        line-height:240px;
        -webkit-backface-visibility: hidden;
    }
    .card .backSide {
        background:red;
        -webkit-transform: rotateY(180deg);
    }
    .card .frontSide {
        z-index:2;
        background:grey;
    }

Dritter Level: Boxen für die beiden Karten DIV.backSide und DIV.frontSide – erst die gemeinsamen Eigenschaften: absolute positionieren, Größe und vor allem hier wichtig backface-visibility: hidden zu definieren. Sonst wird die Box DIV.backSide nie sichtbar, weil bei der Rotation immer die Rückseite von DIV.frontSide zu sehen ist.

Die Boxen unterscheiden sich in der Farbe und in der Darstellung der Rückseite. DIV.backSide muss um 180° gedreht werden. Denn die Rückseite muss wieder eingedreht werden, weil diese bei MouseOver auch um 180° ausgedreht wird.

Fertig ist der Effekt! Im Beispiel gibt es eine zweite Karte mit unterschiedlichen Bildern für die Vorder- und Rückseite.

Fazit

CSS3-Transforms erweitern unsere CSS-Toolbox um wertvolle Eigenschaften wie Skalieren, Rotieren und Verzerren. 2D-Transforms sind für aktuelle Browser quasi Web-Standard. 3D-Transforms werden nur teilweise unterstützt, aber gerade für iOS und Android können 3D-Transforms Performanceprobleme bei Animationen lösen, weil sie das Hardware-Rendering des Computers aktivieren.

Mit Transforms können Shapes wie Sterne oder Parallelogramme auf dem Screen nur mit HTML-Elementen gezeichnet werden.

Richtig Spaß machen Transforms in Verbindung mit Bewegung. Mit einer Transition oder Key-Frame-Animation (nächster Artikel) können HTML-Elemente ohne Programmierkenntnisse im Raum gedreht, vergrößert und verzerrt werden. Diese Effekte lassen sich sehr gut für die Nutzerführung einsetzen. Der User bekommt ein Feedback: Hier passiert gerade etwas, ich habe etwas aktiviert oder ich muss auf das Nachladen warten.

Hier noch mal Beispiele und Code
2D-TransformMenü
3D-Flipped-Image-Effekt
Download Code Beispiele & Demos

Im nächsten Artikel geht es um CSS3-Key-Frame-Animations. Animationen im Browser darzustellen, ist ursprünglich das Key-Feature von Adobe Flash gewesen (wie auch Videoabspielen). Mit CSS3 ist es ein Kinderspiel, eine kleine Animation zu erstellen.

Artikel dieser Serie CSS3-Animations
Part I: CSS3-Transition und Hover-Effekte
Part II: CSS3-Transform
Part III: CSS3-Keyframe-Animation


Über den Autor


Prof. Pepe Jürgens konzipiert, gestaltet und programmiert seit 20 Jahren digitale Medien. Er gründete das interdisziplinäre Design-Studio Weltformat und ist Co-Founder von lernox mit dem Ziel, freie Lehr- und Lernmaterialien aus dem Internet zu kuratieren. Seit 2013 doziert Pepe Jürgens Interaction Design an der Hochschule der populären Künste in Berlin


12 Kommentare

  1. Posted 4. Juni 2013 at 14:13 | Permalink

    Im IE funktioniert der „3D-Flipped-Image-Effekt“ nicht, oder? Gibt es da einen Workaround?

    • pepe
      Posted 5. Juni 2013 at 10:00 | Permalink

      Hallo Martin,
      über CSS gibt es kein Workaround. Internet Explorer bis Version 9 unterstützt einfach keine 3D-Transforms. Da ist nichts zu machen. Erst ab IE 10 wurden 3D-Transforms eingebaut und ich muss gestehen, dass ich das noch nicht ausprobiert habe – doch sollen diese CSS-Eigenschaften im IE10 sich anders Verhalten.

    • Posted 13. Oktober 2013 at 18:58 | Permalink

      Wo kann man das lernen gibt es da eingeübtes Buch ?

  2. Henning
    Posted 5. Juni 2013 at 16:39 | Permalink

    Hi!

    der 3d-flipped-image effekt ist echt nice. Leider ist er wegen der fixen Größenangaben im responsive Design nicht umsetzbar.
    Hast du vielleicht eine Idee wie sich die Größen des div-Containers dynamisch anpassen lassen?

  3. Tobias
    Posted 16. Juni 2013 at 09:01 | Permalink

    Hallo,
    habe ein Parallelogramm erstellt und möchte in diesem Text darstellen. Der Text wird leider schräg angezeigt was nicht gerade super aussieht. Wenn ich einen DIV ins innere setze und mit negativen Werten das ganze aufhebe, wird der Text zwar gerade angezeigt aber man kann dann auch über das Parallelogramm hinwegschreiben. Gibt es eine andere Lösung hierfür?

    Gruß Tobias

  4. Harald
    Posted 20. Juli 2013 at 22:44 | Permalink

    alter ist das kompliziert

  5. Christian
    Posted 6. Dezember 2013 at 21:54 | Permalink

    Moin Pepe, kann es sein, dass du im Quelltext für die “Preserve 3d”-Demo mehrmals fälschlicherweise “rotateY3d” notiert hast, wo “rotate3d” hingemusst hätte?
    Bei mir im FF25/Win jedenfalls passiert dort erst nach Austausch etwas.

  6. Posted 1. März 2016 at 17:02 | Permalink

    Hallo Herr Jürgens,

    ein sehr informativer und übersichtlicher Artikel…!!

    2 Kleinigkeiten sind mir aufgefallen:

    1) Punkt 1 “Transform verstehen”, Absatz 1:
    “(…)ähnlich der relativ absoluten Positionierung(…)”. Genügt hier nicht: absolute?

    2) Punkt 2 “Transform Code-Pattern”, Beispiel:

    1
    scale(5)

    ergibt eine Vergrösserung auf 500%, ansonsten scale(0.5)

    Grüsse aus Bonn

  7. Posted 7. März 2016 at 16:48 | Permalink

    Guten Tag,

    ich wollte mich eigentlich nur bei ihnen für ihr tolles Tutorial bedanken.

    Bin wirklich froh dieses detaillierte und vor allem deutschsprachige Tutorial gefunden zu haben.

    Freue mich schon darauf am Wochenende alles mal zu testen.

    Wirklich nett das Sie sich soviel Mühe gegeben haben um anderen Leuten das Thema näher zu bringen.

    Mit freundlichen Grüßen,

    Dennis

  8. Posted 22. Juni 2016 at 13:00 | Permalink

    Ein sehr aufschlussreicher Beitrag. Vielen Dank. Es ist ein schöner Einblick in die Möglichkeiten, die einem die CSS-Transitions/Transformationen zur Gestaltung von HTML-Elementen bieten.

    Viele Grüße
    //André

  9. pepe
    Posted 6. Juni 2013 at 09:24 | Permalink

    Hallo Henning,
    du könntest mit Media-Queries die Größenangaben für die einzelnen Screengrößen individuell bestimmen. Ich habe Media-Queries in diesem Artikel erklärt: http://www.pepe-juergens.de/2012/11/css3-responsive/. Dann sollte man für die verschachtelten DIVs auf Größenangaben in Prozenten umsteigen (width:100% …), weniger schreibarbeit und übersichtlicher.

Ein Trackback

  1. [...] Link: CSS3-Transform [...]

Post a Comment

Your email is never published nor shared. Required fields are marked *

*
*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>