3Dify Plugin – Rendi qualsiasi elemento della tua pagina web 3D

| | 2 Comments
3dify-preview

preview

Italiano – English

Questo è il mio primo plugin per JQuery, e l’idea mi è venuta vedendo il menu di gioco di Crysis 2. L’ idea è quella di dare una prospettiva agli elementi in base al passaggio del mouse. L’uso e la configurazione sono davvero semplicissimi. Funziona solo sui browser moderni.

This is my first Jquery Plugin, I was inspired from Crysis 2 menu. The idea is to give a perspective to elements with mouse hover. Use & setup are very simple. It work on all modern browsers.

New Version:

04/20/2014 v1.1 works better and on all modern browsers.

Uso – Usage:

tra i tag <head> – between <head> tag:

<script src="js/jquery-1.5.2.min.js"></script>
<script src="js/jquery.threedify.js"></script>
<script type="text/javascript">
	$(document).ready(function(){
	$(el).threedify({
		posZ:value, /*tilt of element, default 0*/
		angle:value /*angle of perspective, default 15*/
	});
	});
</script>

Css:

L’elemento padre deve avere questi valori – Parent element must have this values:

	-webkit-perspective:150px;
	-webkit-perspective-origin:50% 50%;
	-moz-perspective:150px;
	-moz-perspective-origin:50% 50%;
	perspective:150px;
	perspective-origin:50% 50%;

Download

jquery-threedify

DEMO

http://jsfiddle.net/Eddie84/shZ4L/

Riferimenti – Reference

W3C School – CSS3

JQuery Documentation

Tags: , , , , , , , , , , ,

Category: Programmazione

About the Author ()

Studio Ingegneria Informatica e Bio. all' Università Magna Graecia di Catanzaro, sono appassionato di informatica, e mi piace praticare la pesca nelle acque dolci.