JavaScript Fallback-Bibliothek für CSS3 3D Transforms

[Daaron]

Ich hock hier vor einer etwas komplexeren Aufgabe, die sich verdammt elegant mit CSS3 3D-Transformation in Verbindung mit Animation lösen lässt. Es müssen mehrere Schichten Grafik/ übereinander dargestellt werden, quasi wie ein Stapel, inklusive korrekter Perspektive. Wird eine der Ebenen berührt soll sie sich "aufstellen" um les- und bedienbar zu werden.
Leider sind 3D-Transformationen ja bestenfalls im IE10 vorhanden, nicht aber in der 9 und erst recht nicht in Holzbrowsern. Aus diesem Grund bräuchte ich einen JS-Fallback für diese alten Gurken, schließlich kann ich unseren Besuchern ja nicht gerade ein "lad dir Chrome runter, verdammt noch eins!" vor den Latz ballern.

Kennt jemand von euch eine elegante und leicht zu implementierende JS-Lösung für Rotationen in Z-Richtung inkl. Perspektivenkorrektur? Irgendwelche kreativen Ideen?

 

[Lavaground]

du könntest das webkit plugin zum installierren anbieten für ältere browser und ich sehe keinen grund warum ein user seinen browser nicht aktuell halten sollte...

ich denke mal three.js is zuviel 3d und zuwenig tansform für deine zwecke.
ansonsten gibts da noch jquery und sowas hier: http://www.jqueryrain.com/2012/06/refineslide-jquery-3d-transform-slides/

 

[Daaron]

Das Webkit-Plugin wäre in dem Falle genauso, als würdest du gegen eine Wand reden.
Unser erwarteter Besucherstamm besteht zu weiten Teilen aus technisch unbegabten Privatpersonen und natürlich Firmen mit restriktiven Administratoren. Wenn du erleben würdest, was ich mit unseren verschiedenen Kunden erlebe... die Webentwickler-Hölle. WinXP, IE6&7, abgeschaltetes JS, farblich total verstellte Monitore,....

three.js ist übrigens wirklich viel viel viel zu viel 3D. Ich habe keine Zeit, mich hier erst in 3D Modelling einzuarbeiten. Eigentlich will ich nur ein paar Container per Perspective verzerren und etwas umschichten. Ein kleines Experiment für Webkit ist z.B. ein 4-Zeiler im CSS

 

[palace4d]

Ich könnte mir vorstellen das SVG eine güte Lösung ist. Ich habe zwar damit bisher immer nur 2D Grafiken und Animationen erzeugt, aber 3D sollte auch gehen. Für ältere Browser gibt es mit Ample SDK oder Raphael JS geeignete Fallback Libs.

Hab mal ein paar Beispiele rausgesucht:
http://debeissat.nicolas.free.fr/svg3d.php
https://www.svgopen.org/2008/papers/86-Achieving_3D_Effects_with_SVG/
http://www.petercollingridge.co.uk/blog/3d-animation-svg

 

[Daaron]

Mit SVG hätte ich wieder das gute alte Problem aus dem Hause Microsoft.

Wir werden wohl ne weniger coole Lösung suchen, die ohne 3D-Transformationen auskommt. ist aber schade drum, wär cool geworden. Scheißcrosoft.

 

[Lavaground]

ansonsten gibts da noch jquery und sowas hier: http://www.jqueryrain.com/2012/06/refineslide-jquery-3d-transform-slides/

http://jquery.com/browser-support/

ich sag mal faule admins und zuuuuu geizige chefs ^^

MS kann auch nicht in ne Glaskugel schauen und CSS3 im Jahr eppes in nen absolut veralteten Browser einbauen, denk mal mit nem uralt Safari sieht das nicht anders aus xD könnt ich glatt ma auf der vm testen

oder du bastelst eine seite die die echte seite rendert, sowas wie onlive nur für homepages. sowas ähnliches gibts als handybrowser, damit wird die page auf nem server ausgeführt und der client bekommt das "bild" gestreamt und kann auch durch den browser auf der page klicken. aber das wäre schon ein masterpiece

 

[Daaron]

ich sag mal faule admins und zuuuuu geizige chefs ^^

Leidlich fähige Admins würden gern updaten, es wird ihnen nur oftmals von Internetausdruckern untersagt.

MS kann auch nicht in ne Glaskugel schauen und CSS3 im Jahr eppes in nen absolut veralteten Browser einbauen, denk mal mit nem uralt Safari sieht das nicht anders aus xD könnt ich glatt ma auf der vm testen

MS könnten den Support für die älteren Browser-Generationen radikal schnell fallen lassen. MS könnten neue IE-Versionen auch für alte Systeme verfügbar machen. MS könnten ihren Browsern ein Auto-Update inkl. Feature-Update hinzufügen.

oder du bastelst eine seite die die echte seite rendert, sowas wie onlive nur für homepages.

Unser Auftraggeber ist zwar weder arm noch geizig, aber DIE Entwicklungszeit wird er nicht bezahlen. Bis ich mich in solche Ansätze eingearbeitet habe (genau wie bei three.js) ist das gesamte Projekt gescheitert mangels Werbefläche. Ich brauch hier ne schnelle Lösung. CSS3 hätte mich inklusive Feintuning vielleicht n halben Tag gekostet. Unser aktueller, CSS2/JS-basierter Ansatz wird evtl. einen Tag kosten und weit weniger cool sein.