By Mark Hawkins
A jQuery plugin that creates a 3D tilting effect with optional 3D shadow for mouse rollover interaction. Only 3KB minified.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec fringilla mauris eget mattis tempus. Praesent enim lacus, sagittis vitae erat eget, fermentum fringilla elit. Donec eget erat quis justo nec eu enim... (More Details)
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec fringilla mauris eget mattis tempus. Praesent enim lacus, sagittis vitae erat eget, fermentum fringilla elit. Donec eget erat quis justo nec eu enim... (More Details)
$('.details-window-container').tilt3D({
degrees:12, /* 0-30 degrees for best results */
perspective: 400, /* low(100) = more, high(1000) = less */
});
$('.details-window-container-2').tilt3D({
degrees:12, /* 0-30 degrees for best results */
perspective: 400, /* low(100) = more, high(1000) = less */
shadow: "custom", /* default or custom */
shadow_length: 10, /* custom only */
shadow_blur: 10 /* custom only */
});
Whatever object you attach this too, make sure it has no set width and height attributes since this will be set to 100% by the plugin. You can use min-width, and max-width.
Your object should't have a set position attribute either, since it will be asigned a position of "absolute" for this effect.
If you want to use the shadow feature, just add the "shadow" parameter with either a value of "default" or "custom" to customize the length of the shadow and the sharpness.