nicht angemeldet j4nk3y
j4nk3y
Matthias Apsel
j4nk3y
Matthias Apsel
j4nk3y
Matthias Apsel
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
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
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
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
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
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
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
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
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
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
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
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
Hallo,
finde ich sehr interessant, damit habe ich mich bisher nicht beschäftigt. In dem WIKI-Beispiel kapiere ich eins aber nicht:
Matthias Scharwies
Rolf b
Gunnar Bittersmanntransform: 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
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
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?
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
Servus!
Ich wollte gerade mal dazu etwas spielen -
Sieht cool aus - vielen Dank!
Herzliche Grüße
Matthias Scharwies
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
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
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
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 :(
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
@@Rolf b
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 🖖
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
@@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 🖖
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
@@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 🖖
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