✔ Isometrie im Browser?

[cameeel]

Hi all.

Ich bin gerade dabei, ein Projekt zu überarbeiten. Dazu brauch ich unter anderem Isometrische Karten. Auf der Karte soll dann eine Stadt entstehen. In 2D natürlich. Aber eben isometrisch... (Früher war es eine normale 2D-Ansicht, welche natürlicher einfacherer zu realisieren war, aber bei weitem nicht so gut aussieht).

Jetzt zum Problem:
Wie realisier ich das? Ich hab natürlich wieder Felder die ich mit X- und Y-Koordinaten versehe. Aber da die Felder jetzt schräg sind, kann ich ja keine Tabellen mehr nehmen (siehe Anhang)!
Hat von euch schonmal jemand sowas gemacht? Bin für jeden Tipp dankbar...
Eventuell könnte man ewig viele Div's über-/nebeneinander legen?

Gruß,
cAm3eel.

PS: Beim letzen Bild ist das eine Haus falsch platziert....

 

[Matthias Reitinger]

Hallo,

positioniere deine Elemente einfach absolut.

Zufälligerweise hab ich mich an einer solchen Darstellung auch schon mal versucht. Das Ergebnis findest du im Anhang.

Grüße,
Matthias

 

[cameeel]

Fantastisch, das entspricht ziemlich genau meinen Vorstellungen!
Danke.

Gruß,
cAm3eel.

 

[Ricochet]

Hallo,
Zufälligerweise hab ich mich an einer solchen Darstellung auch schon mal versucht.

Du hast nicht zufällig auch mit dem Mousemapping bei der Diamond map rum experimentiert?
Ich bin immernoch auf der Suche nach einer mathematisch sauberen Lösung (Matrix Transformation)
Bin bisher nur mit tricksen zu brauchbaren Ergebnissen gekommen.

 

[raphaelmichel]

JA, ich weiß, dass diese Thread uralt ist. Ich habe ihn in Google gefunden.

Und zwar gefällt mir das Beispiel von Matthias Reitinger genial. Nur kann ich die Felder nicht verlinken, da sich die Transparenten bereiche ja überlappen. Gibt es da Abhilfe?