Richard Rüfenacht: transform: rotateX(xxxdeg);

Beitrag lesen

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