transform
Ein Teil der hier vorgestellten Möglichkeiten für Transformationen verschaffen mir keine Freude. Das mag auch daran liegen, dass diese sich noch in einer experimentellen Phase befinden. Womit erklärt sein könnte, warum Browser unterschiedliches Verhalten aufweisen oder die Erwartungen noch garnicht erfüllen. Das ist einfach nicht implementiert! Da muss man noch warten.
transform:translate() |
|
| Mal vorweg: transform.translate() ist für Aktionen in irgendeinem Zusammenhang gedacht. Statisches Positionieren macht man anders. Um aber grundsätzlich zu verstehen, was hier geschieht, nehme ich mir eine Experimentreihe vor. | |
| Verschiebungsmöglichkeiten auf den x- und y-Achsen
auf der x-Achse: translate(20px), horizontal auf der x-/y-Achse: translate(20px, -10px) horizontal vertikal nur auf der x-Achse: translatex(20px) nur auf der y-Achse: translatey(20px) Es sind positive als auch negative Zahlenwerte möglich. Ebenso ist die Schreibweise translateX und translateY erlaubt. 1. Exkurs Nebenstehende Demonstration beinhaltet drei Rechtecke. Mittels mouseover (der Hovereffekt) soll sich aus dem 2. Rechteck das 3. lösen, um mit umgekehrten Werten zur Ausgangsposition zurückzukehren. Das habe ich mir anders vorgestellt. Da bin ich wohl einem Gedankenfehler aufgelegen. Erklärung im Quellcode Zeile: 30 |
Rechteck 1 Rechteck 2.1 Rechteck 2 |
| 2. Exkurs
Nun positioniere ich Rechteck 2 auf die abgebildete Position und Hover soll soll das bis dahin transparente Rechteck 2.1 auf die Position Rechteck 1 verschieben. Da dies auch wirklich geschieht, stellt sich die Frage: „Was ist falsch am 1. Beispiel?" Im 1. Beispiel löst sich das Rechteck 2.1 zwar aus der Verschiebung transform: translate(200px, 50px); wird aber aus dem ursprünglichen Rechteck 1 heraus berechnet und verschiebt sich nochmals von dessen Ursprung. Daraus folgt: Mit dem Hover-Effekt hat die Anweisung zu erfolgen transform: translate(0, 0);. So wird die Verschiebung zurückgenommen und nicht erweitert. Quellcodes für das 2. Beispiel |
Rechteck 1 Rechteck 2.1 Rechteck 2 |
| 3. Darstellung (ohne Hover)
Alle Verschiebungen in der Horizontalen und Vertikalen Dass transform: translatey(35px); identisch zu transform: translate(0, 35px) ist, muss ich jetzt nicht ausschlachten. Wenn ich mit einer Kombizange einen Draht durchknipsen kann, muss ich dann noch einen Seitenschneider haben? Ansicht des Quellcodes |
Rechteck Ursprung Rechteck 2 Rechteck 3 Rechteck 4 |
| Verschiebungsmöglichkeit auf der z-Achse
translateZ() - eigentlich eine Art scale(). Klingt erst mal ganz einfach. Aber dann! Ohne dem weiteren Attribut perspective(..px) geht garnichts. Am Beispiel transform: perspective(450px) translateZ(130px); wird die Vergrößerung erreicht. Verkleinern würde translateZ(-130px) und das nicht im gleichen Verhältnis. Etwas unbefriedigt gehe ich aus der Sache. Für perspective(440px) habe ich die Breite des Demonstrationsrasters genommen. Vergrößerung dieses Wertes verringert den Effekt. Bei dem Wert 260px schiebt sich die Vergrößerung bis zum linken Rand und wird logischer Weise pixelig - klar, ist ja schließlich kein SVG. Der Wert translateZ(130px) ist einfach ausprobiert. Starke niedrigere Wertwahl mindert wieder die Auswirkung von perspective(). Das ist mir wie in einer Alchemistenküche. Anmerkung: Sollte ohne Regelerkennung bei Mausover die Fläche kurzzeitig verschwinden, ist Chrome oder Opera am Werk. „Von draußen komm ich dann her und hab auch keine Erklärung mehr!“ Ansicht des Quellcodes |
Rechteck heranziehen top: 20px; left: 75px; width: 290px; height: 80px;
|
| Verschiebung bezogen auf x-, y- und z-Achse
transform: translate3d(50px, 25%, 50px); Ein Effekt der auf der z-Achse verborgen bleibt! Die Anwendung von translate3d() zeigt nur in Zusammenhang mit perspective() Wirkung, wie dies translateZ() demonstiert. |
Rechteck um x y und z verschieben |
transform:scale() |
|
| Größenänderung von Elementen transform: scale(1.5, 2) ; transform: scaleX(1.5) ; ist wieder das gleiche wie scale(1.5, 0) transform: scaleY( 2) ; na klar scale(0, 2) Eine Maßangabe wird hier nicht benutzt, 1 ist gleich 100%. Minuswerte spiegeln um die angegeben Achsen. An dem Beispiel ist unschwer zu erkennen, dass der Effekt bessere Ergebnisse erziehlt als translateZ(). Zumindest was die Schrift angeht. An einem Image möchte ich das nicht exerzieren. Das tut nur weh! Ansicht des Quellcodes |
Rechteck vergrößern mit scale() transform: scale(-1.5, 2) ; wird horizontal gespiegelt |
| transform: scaleZ(5) ;
Die Perspektive kommt! Na denn wolln mer mal. Dass scaleZ() ohne weitere Attribute nicht auskommt, konnte ich nirgendwo nachlesen. Es ist aber so! Den entscheidenden Hinweis, der keiner war, weil einfach im Beispielcode gefunden, fand ich bei: wiki.selfhtml.org/wiki/CSS/Eigenschaften/ äußere_Gestaltung/Transformationen/scale#scaleY.28.29 |
Perspektivisches Rechteck mit scaleZ() transform: scaleZ(5) ; |
| In Vorwegnahme von transform-Kombinationen muss ich hier die Kombinationen bereits aufzeigen. damit überhaupt etwas passiert:
Erst mit perspective() und rotateX() wird ein Effekt erzeugt. transform: perspective(500px) scaleZ(5) rotateX(45deg); Und wer scaleZ(5) weglässt wird merken, dass es auch ohne geht. Der Effekt wird lediglich verstärkt. Naja! Das Ergebnis stimmt mich dennoch froh. Mehr solls auch garnicht! |
|
transform:rotate() |
|
| Drehung von Elementen
Drehung um die z-Achse Die Drehung erfolgt ohne Angabe von transform-origin:... vom Zentrum aus (Voreinstellung). Die Attributwerte in: (deg) und (turn) deg(Grad): positiv im Uhrzeigersinn negativ dagegen turn(Umdrehungen): Zahl gibt Anzahl der Umdrehungen an. Ebenfalls positiv oder negativ möglich. Die Kommawerte entsprechen 0 bis 359°. Ansicht des Quellcodes |
Rechteck Kreis Rechteck Rechteck dreht sich |
| Auch schon wieder eine Kombination vorweggenommen. Das blaue Rechteck wird um die linke untere Ecke gedreht und um 50px, der Höhe des Rechtsecks, angehoben. Nun möchte man denken, das wird mit translateY(-50px) gemacht. Ä ä - Das Rechteck hat sich um 90° gedreht und das Koordinatensytem mit ihm. Es muss auf der nun senkrechten x-Achse nach links verschoben werden mit translateX(-50px). | |
| Drehung um die y-Achse
Ansicht des Quellcodes |
Forderseite
Rückseite
|
| Drehung um die x-Achse
Ansicht des Quellcodes |
Forderseite
Rückseite
|
transform:skew() |
|
| Scherung von Elementen
Die vormals eingeführte Funktion skew() ist zugunsten skewX() und skewY() abgelöst. Einige Browser bedienen das noch. Die Zeit hats aber überholt. Der Attributwert wird mit dem Winkelmaß angegeben wie: skewX(15deg) z.B. Zum Verständnis: Die jeweils geltende Scherung oder von mir aus auch Verzerrung beruht darauf, dass die gegenteilige Achse um den angegebenen Winkel wirkt. skewY(-15deg) überträgt auf die x-Achse die Scherung (-15deg) und somit auf das Koordinatensystem. |
Rechteck verzerren transform:skewX(-45deg) ; Rechteck verzerren transform:skewY(-15deg) ; |
perspective() |
|
| Verschiebung der z-Achse Mit dem Attributwert erhalten Elemente eine räumliche Tiefe. Positiv Werte lassen es scheinbar nach vorn rücken, negative nach hinten. Der Eindruck wird verstärkt, in welcher Reihenfolge Elemente notiert sind. Also erst was hinten liegt und das vorderste zum Schluss. Soviel dazu. Nun muss ich etwas ausholen. In den vorigen Demonstrationen sind zwei oder mehr Elemente, denen unterschiedliche Transformationen erteilt wurden. Mit jedem Hover-Triggern, das die Transformation auslöst, wird das jeweilige Koordinatensystem auf das Element bezogen, geändert. Siehe: Rechteck dreht sich um die linke untere Ecke. Für perspektive() lässt sich dieses Demo so nicht erklären. Ansicht des Quellcodes In Voreinstellung ist perspektive(100), größere Werte zoomen den Hintergrund heran, kleinere spreizen den Vordergrund vom Hintergrund. Da gibt es als gute Eselsbrücke das Objektiv. So merkt man sich das! |
Hinweise für das Ausprobieren: MSIE stellt in input typ="number" den Zählintervall nicht dar. Nach Überschreiben eines Wertes irgendwo hinklicken. Firefox beschneidet das graue Hintergrundelement. Chrome und Opera zeigen erst bei mouseover/focus die Intervallschritte. |
| Dieses Attribut bestimmt das Elternelement (blassgelb hinterlegter Hintergund) als Koordinatensystem. Es gilt also für alle 3D-/z-attributierten Objekte, die sich in ihr befinden. Dieses Attribut zu setzen, ist also eine Bedingung für Attribute wie: scaleZ(), translateZ(). | |
transform-origin |
|
| Angel-Punkt der Transformation ändern. Soweit dieses Attribut nicht gesetzt ist, geht jede Transformation vom Zemtrum aus. Dies entspricht dann auch dieser Wertzuweisung: transform-origin: 50% 50%; transform-origin bezieht sich auf das zu transformierende Element. Werte können Zahlen, die Prozentangabe oder [left|center|right] [top|center|bottom] sein. transform-origin: 0 0; Startpunkt ist oben links transform-origin: 100% 0; Startpunkt ist oben rechts transform-origin: 100% 100%; Startpunkt ist unten rechts transform-origin: 50% 0; Startpunkt ist mitte oben |
Rechteck spiegeln transform-origin: 0 0 Ansicht des Quellcodes |
transform:matrix() und transform:matrix3d() |
|
| stellen die bisherigen Transformationen in Form einer Matrixangabe dar. Das ist also das Schweizer Taschenmesser oder die Kombizange. Ja schön! Vielleicht später! |
|