Umdrehen eines Div mit Javascript

Question

Flip ist ein großartiges JQuery-Plugin zum Umdrehen von Blöcken, aber es bewahrt nicht den Hintergrund, während es den Flip animiert.

Zum Beispiel I have this pretty background here, bevor ich kippe. While flipping, it gets ugly.

Gibt es eine Möglichkeit, dass ich diese div schön spiegeln kann, den schönen Hintergrund behalten und vielleicht sogar eine sanftere Animation erziele als mit Flip?

Wenn ich in diesen kopfüber tauchen und meine eigene Funktion zum Spiegeln einer div programmieren muss, ist das auch machbar, und ich würde wirklich einen Zeiger dort schätzen, wenn das das ist, was ich tun muss.

Vielen Dank!

Answer 1

Versuchen Sie die jQuery QuickFlip Pulgin, diese scheint ziemlich ordentlich mit der Handhabung des Hintergrundes.

Answer 2

Versuchen Sie in momoflow zu schauen, es ist eine Coverflow-Anwendung, die den Hintergrund in verschiedenen Winkeln animiert.

Es verwendet jedoch das Canvas-Tag, das ein Problem für Sie sein könnte, wenn Sie IE-Kompatibilität möchten. Die Technik, die der Entwickler verwendet, besteht jedoch darin, das Bild in mehrere vertikale Scheiben zu zerhacken und deren Position zu animieren. Sie können diese Funktionalität erweitern, um einen vollständigen Flip einzuführen!

Answer 3

Ein wirklich cooler Weg, dies zu tun, ist CSS 3 Transformationen zu verwenden. Es ist viel besser als ein Skript; Sie sollten immer vermeiden, Skripte zu verwenden, bei denen einfachere Methoden verwendet werden können.