CSS 3D Transformation, um Trapez von gegebenen Kantenlängen zu machen

Question

Ich habe ein Element von gegebenen Dimensionen (sagen wir, 100x300 px) in einem Container der gleichen Höhe und variabler Breite, die ich mit rotateX um -webkit-transform-origin: top center; während der Auswahl der -webkit-perspective transformieren möchte des Containers, so dass es scheint, dass die untere Zeile des Bildes dort bleibt, wo es ist, aber nur expandiert, um den gesamten Container zu füllen.

Wow, das klingt verwirrend. Hier ist ein Bild:

Also im Grunde möchte ich einen Trapez mit einer festen oberen Breite und einer variable unteren Breite erstellen. Ich kann jedoch die Mathematik hinter den Beziehungen nicht ganz herausfinden ... Javascript willkommen. Folgendes Beispiel funktioniert, wenn der Körper 600px breit ist: http://jsfiddle.net/24qrQ/

Jetzt ist die Aufgabe, die Perspektive und Rotation kontinuierlich mit der Körperbreite zu ändern. Irgendwelche Ideen?

Answer 1

Okay, nach einem Glas Wein kamen die Mathematik zu mir zurück:

Zuerst schauen wir uns die Perspektive/Drehverhältnis suchen. Von der Seite betrachtet, sieht es so aus:

Das rote Element um seinen oberen Rand gedreht wird, wenn wir mit dem unteren Rand des Behälters seinem unteren Rand vorstehen, und der Schnittpunkt zwischen der Projektionslinie die Linie, die an ihrem oberen Rand senkrecht zu dem Behälter ist, ist der erforderliche Blickpunkt. Wir erhalten dies durch einfache Trigonometrie (Anmerkung phi ist hier im Bogenmaß, nicht im Grad).

Wenn wir dies anwenden, erscheint die untere Kante des Elements immer an der unteren Kante des Containers. Jetzt ist der freie Parameter Rotation. Diese scheint die Beziehung

rad = pi/2 - element.width/container.width 

für hinreichend große Breiten zu haben, aber ich kann nicht ganz meinen Kopf wickeln um die tatsächliche Beziehung. Hier ist eine Geige: http://jsfiddle.net/24qrQ/6/

Answer 2

Im Grunde versuchen Sie herauszufinden, wie Sie ein Objekt in den 3D-Raum einfügen, so dass es in einem 2D-Ansichtsfenster angezeigt wird. Das ist immer eine schwierige Sache.

Ich weiß nicht, was die Mathematik ist, und die meisten anderen wahrscheinlich auch nicht. Dies ist kaum ein allgemeines Problem. Aber hier wäre, wie ich es herausfinden würde.

Die einzige Variable hier ist width. Und die 2 Werte, die basierend auf der Breite geändert werden müssen, sind -webkit-perspective auf dem Container und -webkit-transform auf dem inneren Element. Also würde ich die Werte für einige verschiedene Breiten manuell bearbeiten und die 3D-Werte aufzeichnen, die Sie eingeben mussten, damit die Dinge richtig aussehen. (Ich würde den Web Inspector verwenden, um die Werte in Echtzeit zu bearbeiten, so dass Sie sofortiges Feedback erhalten)

Sie haben ein paar Datenpunkte, zeichnen sie in einem Diagramm und versuchen dann herauszufinden, wie sie sich ändern. Ich habe eine Ahnung, dass es eine parabolische Kurve ist, aber es kann auch hyperbolisch oder sinusförmig sein, meine 3D-Mathematik ist nicht gut genug, um sicher zu sein.

Dann können Sie versuchen, eine Gleichung herauszufinden, wo Sie, wenn Sie die Breiten eingeben, die Sie probiert haben, erhalten Sie die manuellen 3D-Werte zurück, die Sie zuvor festgelegt haben. Verwenden Sie dann JS, um die Breite des Containers zu lesen und die CSS-Werte so einzustellen, dass sie richtig aussehen.

---

Ich habe getan, dass mit 3 Breiten 300, 450, 600:

http://jsfiddle.net/24qrQ/3/

Einige Trends liegen auf der Hand. Wenn die Breite zunimmt, nimmt die Perspektive mit zunehmender Geschwindigkeit zu und die Rotation nimmt mit zunehmender Geschwindigkeit ab.

Die genaue Formel herauszufinden, liegt jetzt bei Ihnen.

---

Als einfachere Alternative, wenn eine Formel zu schwierig wird, herauszufinden, können Sie manuell eine Handvoll Breiten und 3D-Werte kuratieren, die schön aussehen und speichern sie irgendwo in JS. Dann könnten Sie nur linear zwischen ihnen interpolieren. Es wäre nicht genau, aber es könnte nah genug sein.

Es wäre auch weniger Spaß!