Qube Navigation 3D

[maria1]

Hallo,

Ich würde gerne eine Navigation wie auf triplagent.com realisieren.
Der Ansatz: http://jsfiddle.net/EAYMc/

Problem: Nicht IE tauglich :/
Versuche es schon seit 2 Tagen - ohne Erfolg.

Könnte mir bitte jemand behilflich sein?

Danke & Grüße

 

[Sempervivum]

Auf triplagent.com kann ich keinen Qube-Effekt erkennen. Die Elemente werden doch nur einfach nach rechts und links verschoben. Erkennt man an der Schrift, die nicht perspektivisch gestaucht wird.
Einen ähnlichen Effekt wie in deinem jsfiddle findest Du, wenn Du nach "flip image" suchst, z. B. hier:
http://jonraasch.com/blog/quickflip-2-jquery-plugin
IMO könntest du den Qube-Effekt auch ohne CSS-Animations erzeugen, wenn Du die Würfelseiten synchron stauchst und expandierst nur mit dem height-Attribut.

 

[Tronjer]

Ich würde mir ja eher Gedanken darüber machen, wie der Effekt auf mobile Devices rüber kommt. Der Anteil derer, die mit Smarphones und Tablets ins Netz gehen, dürfte mindestens 10x höher sein, als die noch existierenden IE7/8 User.

 

[maria1]

Hey,

Danke, naja das Design ist Responsiv also die Navi wird ab 700px zu einem Select umgewandelt...
Reicht das als Fallback aus?

Danke euch für die schnelle Antwort am Samstag :)

 

[Sempervivum]

die noch existierenden IE7/8 User.

Der Efffekt im jsfiddle funktioniert in meinem IE11 auch nicht.

 

[maria1]

Der Efffekt im jsfiddle funktioniert in meinem IE11 auch nicht.

Eben, im IE geht da nichts bzw. nichts richtig...
Sind im IE die X und Y Achsen anders oder erkennt er einfach gewisse Werte nicht?

 

[Sempervivum]

Weil mich so etwas interessiert, habe ich ein wenig gegoogelt und diese Seite gefunden:
http://keith-wood.name/imageCube.html
Unter "3D Effects" findest Du auch eine Version mit Pseudo-3D, die dem auf deinem jsfiddle genau entspricht. Funktioniert zumindest in meinem IE 11 einwandfrei.