https://www.galilmountain.co.il/he/000Frames/utils/hover3d-master/source/js/jquery.hover3d.js

1/*
2jQuery Hover3d
3=================================================
4Version: 1.1.0
5Author: Rian Ariona
6Website: http://ariona.net
7Docs: http://ariona.github.io/hover3d
8Repo: http://github.com/ariona/hover3d
9Issues: http://github.com/ariona/hover3d/issues
10*/
11
12(function($){
13	
14	$.fn.hover3d = function(options){
15		
16		var settings = $.extend({
17			selector      : null,
18			perspective   : 1000,
19			sensitivity   : 20,
20			invert        : false,
21			shine         : false,
22			hoverInClass  : "hover-in",
23			hoverOutClass : "hover-out",
24			hoverClass    : "hover-3d"
25		}, options);
26		
27		return this.each(function(){
28			
29			var $this = $(this),
30				$card = $this.find(settings.selector);
31				currentX = 0;
32				currentY = 0;
33
34
35			if( settings.shine ){
36				$card.append('<div class="shine"></div>');
37			}
38			var $shine = $(this).find(".shine");
39
40			// Set perspective and transformStyle value
41			// for element and 3d object
42			$this.css({
43				perspective: settings.perspective+"px",
44				transformStyle: "preserve-3d"
45			});
46			
47			$card.css({
48				perspective: settings.perspective+"px",
49				transformStyle: "preserve-3d",
50			});
51
52			$shine.css({
53				position  : "absolute",
54				top       : 0,
55				left      : 0,
56				bottom    : 0,
57				right     : 0,
58				transform : 'translateZ(1px)',
59				"z-index" : 9
60			});
61			
62			// Mouse Enter function, this will add hover-in
63			// Class so when mouse over it will add transition
64			// based on hover-in class
65			function enter(event){
66				$card.addClass(settings.hoverInClass+" "+settings.hoverClass);
67				currentX = currentY = 0;
68				setTimeout(function(){
69					$card.removeClass(settings.hoverInClass);
70				}, 1000);
71			}
72			
73			// Mouse movement Parallax effect
74			function move(event){
75				
76				var w      = $card.innerWidth(),
77					h      = $card.innerHeight(),
78					currentX = Math.round(event.pageX - $card.offset().left),
79					currentY = Math.round(event.pageY - $card.offset().top),
80					ax 	   = settings.invert ?  ( w / 2 - currentX)/settings.sensitivity : -( w / 2 - currentX)/settings.sensitivity,
81					ay     = settings.invert ? -( h / 2 - currentY)/settings.sensitivity :  ( h / 2 - currentY)/settings.sensitivity,
82					dx     = currentX - w / 2,
83					dy     = currentY - h / 2,
84					theta  = Math.atan2(dy, dx),
85					angle  = theta * 180 / Math.PI - 90;
86
87					
88				if (angle < 0) {
89					angle  = angle + 360;
90				}
91				
92
93				$card.css({
94					perspective    : settings.perspective+"px",
95					transformStyle : "preserve-3d",
96					transform      : "rotateY("+ax+"deg) rotateX("+ay+"deg)"
97				});
98
99				$shine.css('background', 'linear-gradient(' + angle + 'deg, rgba(255,255,255,' + event.offsetY / h * .5 + ') 0%,rgba(255,255,255,0) 80%)');
100			}
101			
102			// Mouse leave function, will set the transform
103			// property to 0, and add transition class
104			// for exit animation
105			function leave(){
106				$card.addClass(settings.hoverOutClass+" "+settings.hoverClass);
107				$card.css({
108					perspective    : settings.perspective+"px",
109					transformStyle : "preserve-3d",
110					transform      : "rotateX(0) rotateY(0)"
111				});
112				setTimeout( function(){
113					$card.removeClass(settings.hoverOutClass+" "+settings.hoverClass);
114					currentX = currentY = 0;
115				}, 1000 );
116			}
117			
118			// Mouseenter event binding
119			$this.on( "mouseenter", function(){
120				return enter();
121			});
122			
123			// Mousemove event binding
124			$this.on( "mousemove", function(event){
125				return move(event);
126			});
127			
128			// Mouseleave event binding
129			$this.on( "mouseleave", function(){
130				return leave();
131			});
132			
133		});
134		
135	};
136	
137}(jQuery));