transform: rotateX(xxxdeg);

[j4nk3y]

Salve!

Eine kleine Frage, da ich gerade darauf gestoßen bin.
Warum verursacht transform: rotateX(45deg); keine "echte" Rotation um die X-Achse?

Was ich meine: Wenn Man ein Blatt Papier vor seinen Augen hält und dieses um die X-Achse (in der Mitte) dreht, ist logischerweise, abhängig vom Winkel, die obere Hälfte näher/weiter von seinen Augen entfernt und die untere Hälfte dementsprechend weiter/näher entfernt. Demnach sollten auch auf der Fläche dargestellte Elemente kleiner/größer erscheinen als im ursprungs Zustand.

Wie könnte Man diesen Effekt erzeugen ohne für jedes Element eine positions abhängige Größe zu deklarieren?

Gruß
Jo

[MrMurphy1]

Hallo

Ich kann deine Frage nicht nachvollziehen. Du vergleichst Äpfel mit Birnen und wunderst dich über die Unterschiede.

Bei transform: rotate wird davon ausgegangen, dass der Besucher senkrecht auf die zweidimensionale Fläche schaut.

Die von dir beschriebene dreidimensionale Schrägsicht ist dabei überhaupt nicht vorgesehen.

Dafür muss zu anderen Ausgangslagen und Lösungen gegriffen werden. Zum Beispiel könnte die Fläche gekippt werden.

Ohne konkretes Beispiel werden wir dir kaum helfen können, da deine Beschreibungen einigermaßen verwirrend sind.

Gruss

MrMurphy

[j4nk3y]

Hey,

Ich kann deine Frage nicht nachvollziehen. Du vergleichst Äpfel mit Birnen und wunderst dich über die Unterschiede.

Ja das tue ich wohl. Ich ging davon aus das transform: rotateX;, eine Rotation zurfolge hat, aber dem scheint nicht so zu sein.

Bei transform: rotate wird davon ausgegangen, dass der Besucher senkrecht auf die zweidimensionale Fläche schaut.

Ja, wie bei einem Stück Papier.

Die von dir beschriebene dreidimensionale Schrägsicht ist dabei überhaupt nicht vorgesehen.

Sollte sie aber, wenn von einer 3 dimensionalen Rotation die rede ist.

Gruß
Jo

[Matthias Apsel]

Hallo j4nk3y,

Wie könnte Man diesen Effekt erzeugen ohne für jedes Element eine positions abhängige Größe zu deklarieren?

Schau mal ins Wiki.

Bis demnächst
Matthias

[j4nk3y]

Hallo Matthias,

Schau mal ins Wiki.

Ja, da einmal den blauen kasten beim hover beobachten. Moment... kurz ein Fiddle basteln...

Wenn auf das Element gehovert wird, wird der Container um die X-Achse um 60 Grad gedreht. Das komische ist aber, dass das Element nicht wirklich gedreht wird, sondern einfach nur die Höhe des Containers und die Schrifthöhe verringert wird. Dies hat jedoch nichts mit echter Rotation zutun.

Gruß
Jo

[Matthias Apsel]

Hallo j4nk3y,

Wenn auf das Element gehovert wird, wird der Container um die X-Achse um 60 Grad gedreht. Das komische ist aber, dass das Element nicht wirklich gedreht wird, sondern einfach nur die Höhe des Containers und die Schrifthöhe verringert wird. Dies hat jedoch nichts mit echter Rotation zutun.

Mit transform: rotateX() können Sie ein Element um die x-Achse drehen.
Dies entspricht: rotate3d(1, 0, 0, <Winkel>.

Die x-Achse verläuft anders als du erwartest.

Das Raster soll den Bildschirm darstellen.

Bis demnächst
Matthias

[j4nk3y]

Hallo Mathias,

Mit transform: rotateX() können Sie ein Element um die x-Achse drehen.
Dies entspricht: rotate3d(1, 0, 0, <Winkel>.

Die x-Achse verläuft anders als du erwartest.

Die läuft genau wie ich es erwarte. Aber es wird nicht wirklich Rotiert. Sonst müsste die Schrift im Fiddle oben größer und unten kleiner werden. Sie wird aber überall gleich klein.

Gruß
Jo

[Matthias Apsel]

Hallo j4nk3y,

Die läuft genau wie ich es erwarte. Aber es wird nicht wirklich Rotiert. Sonst müsste die Schrift im Fiddle oben größer und unten kleiner werden. Sie wird aber überall gleich klein.

Nein. Du schaust oben und unten unter dem selben Winkel auf die Schrift. Im Modell ist der Bildschirm unendlich weit von dir entfernt. Sonst müsstest du auch den Fall berücksichtigen, dass sich ein Teil der Schrift schon hinter deinen Augen befindet.

Bis demnächst
Matthias

[j4nk3y]

Hey Matthias,

Nein. Du schaust oben und unten unter dem selben Winkel auf die Schrift.

Gut. Schade das keine wirklich Rotation möglich ist.
Danke schön!

Gruß
Jo

[Matthias Apsel]

Hallo j4nk3y,

Gut. Schade das keine wirklich Rotation möglich ist.

Falls du an Starwars denkst: http://blogs.sitepointstatic.com/examples/tech/css3-starwars/index.html

Bis demnächst
Matthias

[Matthias Scharwies]

Servus!

Hallo j4nk3y,

Gut. Schade das keine wirklich Rotation möglich ist.

Falls du an Starwars denkst:

Warum verlinkst du nicht ins Wiki: scale3d()

Mit transform-perspective kannst du die von Matthias Apsel erwähnte Distanz, die erst eine 3d-Perspektive möhglich macht, festlegen.

Herzliche Grüße

Matthias Scharwies

[j4nk3y]

Servus,

Mit transform-perspective

Das hab ich auch gerade gefunden! Danke dir!

Gruß
Jo

[Matthias Apsel]

Hallo Matthias Scharwies,

Falls du an Starwars denkst:

Warum verlinkst du nicht ins Wiki: scale3d()

Ich wusste doch, dass wir das auch haben ;-)

Bis demnächst
Matthias

[Rolf b]

Hallo,

finde ich sehr interessant, damit habe ich mich bisher nicht beschäftigt. In dem WIKI-Beispiel kapiere ich eins aber nicht:

transform: perspective(1000px) scale3d(1,1,3) rotate3d(1,0,0,20deg);

und

transform: perspective(333px) scale3d(1,1,1) rotate3d(1,0,0,20deg);

führen optisch zum gleichen Ergebnis. Täusche ich mich in dem Eindruck, als ob man hier mit scale3d versucht hat, den eigentlich falsch gewählten Z-Abstand der perspective-Transformation zu kompensieren?

Rolf

[Matthias Scharwies]

Servus!

Hallo,

finde ich sehr interessant, damit habe ich mich bisher nicht beschäftigt. In dem WIKI-Beispiel kapiere ich eins aber nicht:

transform: perspective(1000px) scale3d(1,1,3) rotate3d(1,0,0,20deg);

und

transform: perspective(333px) scale3d(1,1,1) rotate3d(1,0,0,20deg);

führen optisch zum gleichen Ergebnis. Täusche ich mich in dem Eindruck, als ob man hier mit scale3d versucht hat, den eigentlich falsch gewählten Z-Abstand der perspective-Transformation zu kompensieren?

Oh Gott, du hast Recht, wird irgendwann in nächster Zeit angepasst und dann zu den transform: rotate3d verschoben.

Damit suchen wir jetzt ein Beispiel für scale3d(). :-(

Herzliche Grüße

Matthias Scharwies

[Rolf b]

Ich wollte gerade mal dazu etwas spielen - und hätte erwartet, dass sich in diesem Fiddle die kleinen Quadrate aus der Ebene "erheben" wenn ich mit der Maus drauffahre. Das wäre dann (vielleicht) eine Ausgangsbasis für eine scale3d Spielwiese gewesen. Aber sie tun's nicht. Warum?

[Richard Rüfenacht]

Hallo Rolf

Ich wollte gerade mal dazu etwas spielen - und hätte erwartet, dass sich in diesem Fiddle die kleinen Quadrate aus der Ebene "erheben" wenn ich mit der Maus drauffahre.

Die Wertangabe bei translate ist so wohl nicht korrekt. Ich bezweifle aber, ob der gewünschte Effekt damit überhaupt erreicht werden kann. Ich nenne dir auf die Schnelle nur zwei mögliche Stichworte: „perspektive-origin“ und „transform-style“.

Mit besten Grüssen
Richard

[Matthias Scharwies]

Servus!

Ich wollte gerade mal dazu etwas spielen -

Sieht cool aus - vielen Dank!

Herzliche Grüße

Matthias Scharwies

[Rolf b]

Na ich weiß nicht. Nach Richards Hinweis habe ich den Perspective-Style korrekt platziert (und ja, ein transform war falsch geschrieben). Ergebnis hier. Wenn man aus einem nicht allzu flachen Winkel draufschaut, sieht es auch halbwegs richtig aus. Aber wehe, man dreht das div.dreid zu weit nach hinten. Wenn ich Quadrate mit Kantenlänge 80px habe und einen transformZ(100px), dann sollten die Quadrate sich deutlich weiter von der Grundebene entfernen als sie es dann tun.

Darüber hinaus finde ich, dass die 3D Transforms auch in anderer Beziehung sehr eigenwillig definiert sind. Ich habe eins der 16 quadratischen Felder grün angemalt und um -40 Grad um die X-Achse gedreht (also "nach vorn" geklappt). Das Div, in dem die Felder angeordnet sind, habe ich um 40 Grad entgegengesetzt gedreht (also "nach hinten" geklappt). Ich würde erwarten, dass sich das grüne Feld dann wieder quadratisch darstellt, d.h. die beiden Transformationen sich aufheben. Das ist aber nicht der Fall. Wenn es kein Bug ist, dann ist es ein recht merkwürdiges Feature.

Rolf

[Richard Rüfenacht]

Hallo Rolf

Nicht verzagen!

… Wenn ich Quadrate mit Kantenlänge 80px habe und einen transformZ(100px), dann sollten die Quadrate sich deutlich weiter von der Grundebene entfernen als sie es dann tun.

transform auf der Z-Achse bleibt wirkungslos, weil das Ergebnis auf dem zweidimensionalen Bildschirm nicht dargestellt werden kann. Du solltest hier zu anderen Mitteln greifen.

… Ich habe eins der 16 quadratischen Felder grün angemalt und um -40 Grad um die X-Achse gedreht (also "nach vorn" geklappt). Das Div, in dem die Felder angeordnet sind, habe ich um 40 Grad entgegengesetzt gedreht (also "nach hinten" geklappt). Ich würde erwarten, dass sich das grüne Feld dann wieder quadratisch darstellt, d.h. die beiden Transformationen sich aufheben. Das ist aber nicht der Fall. Wenn es kein Bug ist, dann ist es ein recht merkwürdiges Feature.

Ich finde, das grüne Feld verhält sich korrekt. Du schaffst das Problem in „dreid“.

Vermutlich solltest du die Eltern-Kind-Beziehung mit transform-style aufheben, um die kleinen Quadrate unabhängig gestalten zu können. Ich werde dir dazu noch etwas schreiben.

Mit besten Grüssen
Richard

[Richard Rüfenacht]

Hallo Rolf

Ich würde erwarten, dass sich das grüne Feld dann wieder quadratisch darstellt, d.h. die beiden Transformationen sich aufheben. Das ist aber nicht der Fall. Wenn es kein Bug ist, dann ist es ein recht merkwürdiges Feature.

Die kleinen Quadrate sind Kindelemente eines transformierten Elternelements und befinden sich damit auf der selben Ebene. Wenn die Quadrate unabhängig vom Elternelement transformiert werden sollen, müssen sie deren Ebene verlassen. Das geschieht mit transfom-style: preserve-3d;.

Darüber hinaus finde ich, dass die 3D Transforms auch in anderer Beziehung sehr eigenwillig definiert sind. …

Nun, ich bin weit davon entfernt, CSS-Transforms und -Animationen zu verteidigen. Ich halte das für einen bescheidenen Abklatsch von dem, was möglich wäre. Ich akzeptiere aber, dass auf Plug-Ins verzichtet werden soll und deshalb etwa Adobe-Flash abgelöst wird.

Mit besten Grüssen
Richard

[Rolf b]

preserve-3d war der entscheidende Hinweis. Vermutlich rechnet er dann aufwändiger, jedenfalls ist die 3D-Modellierung dann korrekt.

Hier ist die fertige Button-Box

Der beste Beweis, dass HTML ein Feature zum Definieren von wiederverwendbaren 3D Objekten fehlt. Oder dass ich es nicht kenne.

Aber ein Anwendungsbeispiel für scale3d ist das immer noch nicht :(

[j4nk3y]

Moin Rolf,

Hier ist die fertige Button-Box

Sehr genial! Gefällt mir.

Gruß
Jo

[Matthias Apsel]

Hallo Rolf b,

Der beste Beweis, dass HTML ein Feature zum Definieren von wiederverwendbaren 3D Objekten fehlt. Oder dass ich es nicht kenne.

Dem HTML fehlt das garantiert nicht ;-) Aber unbestritten cool. Kann man direkt für TicTacToe verwenden.

Bis demnächst
Matthias

[Gunnar Bittersmann]

@@Rolf b

Hier ist die fertige Button-Box

Gibt es einen Grund, warum du div-Suppe kochst anstatt angemessene HTML-Elemente zu verwenden?

Schön, wenn man mit einer Maus drüberfährt. Aber warum nicht auch per Tastatur steuerbar?

LLAP 🖖

[Richard Rüfenacht]

Hallo Gunnar

Schön, wenn man mit einer Maus drüberfährt. Aber warum nicht auch per Tastatur steuerbar?

Die Frage meinst du jetzt nicht wirklich ernst?

Mit den sehr beschränkten Möglichkeiten von CSS-Transforms muss man sich ganz einfach abfinden.

Mit besten Grüssen
Richard

[Gunnar Bittersmann]

@@Richard Rüfenacht

Schön, wenn man mit einer Maus drüberfährt. Aber warum nicht auch per Tastatur steuerbar?

Die Frage meinst du jetzt nicht wirklich ernst?

Selbsteverständlich meine ich die ernst.

Mit den sehr beschränkten Möglichkeiten von CSS-Transforms muss man sich ganz einfach abfinden.

Tastaturbedienbarkeit hat jetzt genau was mit CSS-Transforms (also der Darstellung) zu tun?

Tastaturbedienbarkeit hat aber sehr wohl was mit HTML zu tun (oder mit JavaScript).

LLAP 🖖

[Richard Rüfenacht]

Hallo Gunnar

Schön, wenn man mit einer Maus drüberfährt. Aber warum nicht auch per Tastatur steuerbar?

Die Frage meinst du jetzt nicht wirklich ernst?

Selbsteverständlich meine ich die ernst.

Es ging nur um einen kleinen Versuch mit 3D-Transforms, nicht um das, was du noch hinzu interpretierst.

Mit den sehr beschränkten Möglichkeiten von CSS-Transforms muss man sich ganz einfach abfinden.

Tastaturbedienbarkeit hat jetzt genau was mit CSS-Transforms (also der Darstellung) zu tun?

Es ging um das Auslösen der Transition mit :hover. Um Tastaturbedienung ging es nicht, das wäre eine Erweiterung, die nur du forderst. Niemand hindert dich das Beispiel zu erweitern - mit Taten, nicht nur mit Worten!

Mit besten Grüssen
Richard

[Gunnar Bittersmann]

@@Richard Rüfenacht

Mit den sehr beschränkten Möglichkeiten von CSS-Transforms muss man sich ganz einfach abfinden.

Tastaturbedienbarkeit hat jetzt genau was mit CSS-Transforms (also der Darstellung) zu tun?

Es ging um das Auslösen der Transition mit :hover.

Und warum nicht auch mit :focus? CSS beschränkt hier keine Möglichkeiten.

Um Tastaturbedienung ging es nicht, das wäre eine Erweiterung

Nei-en. Bedienbarkeit ist keine „Erweiterung“.

“Keyboard accessibility is not a feature.” —Heydon Pickering
“It’s not a feature, but a requirement.” —Šime Vidas

die nur du forderst.

Nein.

Niemand hindert dich das Beispiel zu erweitern - mit Taten, nicht nur mit Worten!

Doch, die Zeit.

Außerdem ging meine Frage an Rolf in die Richtung, das Bewusstsein zu schaffen, doch gleich ein für alle bedienbares Beispiel zu erstellen.

LLAP 🖖

[Rolf b]

Gunnar, deine Prinzipien respektiere ich. Ich bin nur nicht geübt darin, sie umzusetzen. Allerdings unterscheide ich auch immer zwischen einer "real-life Seite" und "Konzeptprobe für ein bestimmtes Feature".

Es ging um das Auslösen der Transition mit :hover. Und warum nicht auch mit :focus? CSS beschränkt hier keine Möglichkeiten.

Nö. Es ging um die korrekte Transition im 3D Raum. Die Auslösung war mir egal. :hover war gerade am einfachsten. Das Beispiel hat nie Anspruch auf Vollständigkeit bezüglich der Bedienbarkeit erhoben.

Niemand hindert dich das Beispiel zu erweitern - mit Taten, nicht nur mit Worten! Doch, die Zeit.

Mich auch. Die Vervollständigung bleibt also dem Leser überlassen, der Wert darauf legt.

Rolf