Creating a Banner Rotation with Webkit-transform CSS3

Published by: Emil // Date 15.12.2011 // Views: 6134 // Add to Twitter :: Facebook

Image
The base idea was to create a "3D popup book" with CSS3,Javascript and Webkit. The result is not that, but is pretty good for a banner presentation, my personal opinion. Basically it is a loop, which gets the images, png images roatated already with 180 degrees, and -webkit-transform turns this images again with 180 degrees. It's sure enought for 2D, but not enought to obtain a "3D popup book". Aditionally I add firefly, because I like this effect, the particles, in the background moving.

Demo link:
http://maran-emil.de/experiments/demo7/





Resources:

firefly - A jquery animation plugin
http://motyar.blogspot.com/2010/04/firefly-jquery-animation-plugin.html

Images:

Background
http://designzz.deviantart.com/art/SnowShow-146983214

Audi R8
http://www.m-tech.org.uk/carsales.html

Man
http://halo.wikia.com/wiki/File:Humans.png