2013-03-09 10 views
7

Ich habe eine Geige here mit der Sie spielen können. Bewegen Sie sich um die Schieberegler rotateX und rotaryY, um zu sehen. Der Teil des Elements, der dir am nächsten ist, ist kleiner, während der Teil, der weiter entfernt ist, größer ist. Wenn Sie es drehen umWarum erscheint die Perspektive transformierter Elemente rückwärts?

transform:rotateZ(180deg); 

mit sieht es richtig, aber ich verstehe nicht, warum es genau richtig an erster Stelle sehen doesnt.

enter image description here

Update

macht es Sinn, wenn man sich this 3d cube suchen. Der Transformationsursprung des Würfels ist die Mitte des Würfels.

+0

Wie oder warum ist das nicht Thema? Jeder Benutzer, der unten aufgeführt ist, der dies als Off-Thema abgeschlossen hat, ist schwache Soße. Geben Sie eine Antwort oder eine Begründung hinter Ihrem Heiliger als Sie Vorrechte – albert

+0

thx für das Aufstehen für die Gültigkeit der Frage. – user1873073

+0

@thinkingstiff "Hör auf, diesen Mist an die Spitze zu setzen" was für eine eingehende und intuitive Antwort. Wir können alle davon lernen! – albert

Antwort

3

isometrischen

Soweit ich die Methoden sagen kann arbeiten, wie sie sind annehmen, es ist nur, dass sie in einer isometrischen 3D gedreht werden, ist, dass ohne Perspektive. Dadurch werden Ihre nächsten und weiteren Kanten die gleiche Größe haben, im Gegensatz zu echtem 3D, bei dem die weitere Kante kleiner und die nähere Seite größer aussieht.

Für einen eingehenden Blick auf isometrische Projektion geben Sie die wikipedia article lesen.

Perspective

Wenn Sie auf die Drehungen bekommen Perspektive möchten Sie die perspective Eigenschaft zu Ihrem CSS für das enthaltende Element hinzugefügt haben. Wenn Sie in Ihrer ersten Geige -webkit-perspective: 1000px; zu <body> hinzufügen und das Ergebnis in Chrome sehen, erhalten Sie Perspektive 3D, wie Sie es wahrscheinlich wollten.

Weitere Informationen zu dieser Immobilie finden Sie unter CSS3 transform spec.

+0

nach einem zweiten Blick auf diese Eigenschaft ist dies schließlich, was funktioniert hat. Seltsamerweise funktionierte es nur einmal beim Elternteil des Containers. – user1873073