https://protuning-psg.ru/themes/protuning/js/rotate3Di.js

1(function ($) {
2    // rotate3Di v0.9.2
3    // https://github.com/zachstronaut/rotate3Di
4    // 2012.10.04 - 2009.03.11 Zachary Johnson http://www.zachstronaut.com
5    // "3D" isometric rotation and animation using CSS3 transformations
6    // currently supported in Safari/Chrome/Webkit, Firefox 3.5+, IE 9+,
7    // and Opera 11+. Tested with jQuery 1.3.x through 1.7.2.
87
9    
10    var calcRotate3Di = {
11        direction: function (now) {return (now < 0 ? -1 : 1);},
12        degrees: function (now) {return (Math.floor(Math.abs(now))) % 360;},
13        scale: function (degrees) {return (1 - (degrees % 180) / 90)
14                                            * (degrees >= 180 ? -1 : 1);}
15    }
16    
17    // Custom animator
18    $.fx.step.rotate3Di = function (fx) {
19		//console.log('1');
20        direction = calcRotate3Di.direction(fx.now);
21        degrees = calcRotate3Di.degrees(fx.now);
22        scale = calcRotate3Di.scale(degrees);
23		
24
25        if (fx.options && typeof fx.options['sideChange'] != 'undefined') {
26            if (fx.options['sideChange']) {
27                var prevScale = $(fx.elem).data('rotate3Di.prevScale');
28               // console.log(scale);
29                // negative scale means back side
30                // positive scale means front side
31                // if one is pos and one is neg then we have changed sides
32                // (but one could actually be zero).
33                if (scale * prevScale <= 0) {
34                    // if one was zero, deduce from the other which way we are
35                    // flipping: to the front (pos) or to the back (neg)?
36                    fx.options['sideChange'].call(
37                        fx.elem,
38                        (scale > 0 || prevScale < 0)
39                    );
40                    // this was commented out to prevent calling it more than
41                    // once, but then that broke legitimate need to call it
42                    // more than once for rotations of 270+ degrees!
43                    //fx.options['sideChange'] = null;
44                    
45                    // this is my answer to commenting the above thing out...
46                    // if we just flipped sides, flip-flop the old previous
47                    // scale so that we can fire the sideChange event correctly
48                    // if we flip sides again.
49                    $(fx.elem).data(
50                        'rotate3Di.prevScale',
51                        $(fx.elem).data('rotate3Di.prevScale') * -1
52                    );
53                }
54            }
55
56            // Making scale positive before setting it prevents flip-side
57            // content from showing up mirrored/reversed.
58            scale = Math.abs(scale);
59        }
60
61        // Since knowing the current degrees is important for detecting side
62        // change, and since Firefox 3.0.x seems to not be able to reliably get
63        // a value for css('transform') the first time after the page is loaded
64        // with my flipbox demo... I am storing degrees someplace where I know
65        // I can get them.
66        $(fx.elem).data('rotate3Di.degrees', direction * degrees);
67        
68		$(fx.elem).css(
69            'transform',
70            'skewY(' + direction * degrees + 'deg)'
71                + ' scale(' + scale + ', 1)'
72        );
73		
74		/*
75		console.log(degrees);
76		
77		
78		$(fx.elem).css(
79            'transform',
80            'rotateY('+direction * degrees  + 'deg)'
81                + ' scale(' + scale + ', 1)'
82        );
83*/
84    }
85    
86    // fx.cur() must be monkey patched because otherwise it would always
87    // return 0 for current rotate3Di value
88    var proxied = $.fx.prototype.cur;
89    $.fx.prototype.cur = function () {
90        if(this.prop == 'rotate3Di') {
91            return $(this.elem).data('rotate3Di.degrees') || 0;
92        }
93        
94        return proxied.apply(this, arguments);
95    }
96    
97    $.fn.rotate3Di = function (degrees, duration, options) {
98        if (typeof duration == 'undefined') {
99            duration = 0;
100        }
101        
102        if (typeof options == 'object') {
103            $.extend(options, {duration: duration});
104        } else {
105            options = {duration: duration};
106        }
107        
108        if (degrees == 'toggle') {
109            // Yes, jQuery has the toggle() event but that's only good for
110            // clicks, and likewise hover() is only good for mouse in/out.
111            // What if you want to toggle based on a timer or something else?
112            if ($(this).data('rotate3Di.flipped')) {
113                degrees = 'unflip';
114                
115            } else {
116                degrees = 'flip';
117            }
118        }
119        
120        if (degrees == 'flip') {
121            $(this).data('rotate3Di.flipped', true);
122
123            var direction = -1;
124            if (
125                typeof options == 'object'
126                && options['direction']
127                && options['direction'] == 'clockwise'
128            ) {
129                direction = 1;
130            }
131            
132            degrees = direction * 180;
133            
134        } else if (degrees == 'unflip') {
135            $(this).data('rotate3Di.flipped', false);
136            
137            degrees = 0;
138        }
139        //console.log( degrees);
140		
141        var d = $(this).data('rotate3Di.degrees') || 0;
142        $(this).data(
143            'rotate3Di.prevScale',
144            calcRotate3Di.scale(calcRotate3Di.degrees(d))
145        );
146        $(this).animate({rotate3Di: degrees}, options);
147    }
148})(jQuery);