https://cdcint.com/wp-content/themes/CDC_Theme/js/flip.js?v=1.0

1(function( $ ) {
2  var flip = function($dom) {
3    $dom.data("fliped", true);
4
5    var rotateAxis = "rotate" + $dom.data("axis");
6    $dom.find(".front").css({
7      transform: rotateAxis + ($dom.data("reverse") ? "(-180deg)" : "(180deg)")
8    });
9
10    $dom.find(".back").css({
11      transform: rotateAxis + "(0deg)"
12    });
13  };
14
15  var unflip = function($dom) {
16    $dom.data("fliped", false);
17
18    var rotateAxis = "rotate" + $dom.data("axis");
19    $dom.find(".front").css({
20      transform: rotateAxis + "(0deg)"
21    });
22
23    $dom.find(".back").css({
24      transform: rotateAxis + ($dom.data("reverse") ? "(180deg)" : "(-180deg)")
25    });
26  };
27
28  $.fn.flip = function(options) {
29    this.each(function(){
30      var $dom = $(this);
31
32      if (options !== undefined && typeof(options) == "boolean") { // Force flip the DOM
33        if (options) {
34          flip($dom);
35        } else {
36          unflip($dom);
37        }
38      } else { //Init flipable DOM
39        var settings = $.extend({
40          axis: "y",
41          reverse: false,
42          trigger: "click",
43          speed: 500
44        }, options );
45        
46        // save reverse and axis css to DOM for performing flip
47        $dom.data("reverse", settings.reverse);
48        $dom.data("axis", settings.axis);
49
50        if (settings.axis.toLowerCase() == "x") {
51          var prespective = $dom.outerHeight() * 2;
52          var rotateAxis = "rotatex";
53        } else {
54          var prespective = $dom.outerWidth() * 2;
55          var rotateAxis = "rotatey";
56        }
57
58        $dom.find(".back").css({
59          transform: rotateAxis + "(" + (settings.reverse? "180deg" : "-180deg") + ")"
60        });
61
62        $dom.css({
63          perspective: prespective,
64          position: "relative"
65        });
66
67        var speedInSec = settings.speed / 1000 || 0.5;
68        $dom.find(".front, .back")
69          .outerHeight($dom.height() / 2)
70          .outerWidth($dom.width())
71          .css({
72            "transform-style": "preserve-3d",
73            position: "absolute",
74            transition: "all " + speedInSec + "s ease-out",
75            "backface-visibility": "hidden"
76          });
77
78
79        if (settings.trigger.toLowerCase() == "click") {
80          $dom.find('button, a, input[type="submit"]').click(function (event) {
81            event.stopPropagation();
82          });
83
84          $dom.click(function() {
85            if ($dom.data("fliped")) {
86              unflip($dom);
87            } else {
88              flip($dom);
89            }
90          });
91        } else if (settings.trigger.toLowerCase() == "hover") {
92          var performFlip = function() {
93            $dom.unbind('mouseleave', performUnflip);
94
95            flip($dom);
96
97            setTimeout(function() {
98              $dom.bind('mouseleave', performUnflip);
99              if (!$dom.is(":hover")) {
100                unflip($dom);
101              }
102            }, (settings.speed + 150));
103          };
104
105          var performUnflip = function() {
106            unflip($dom);
107          };
108
109          $dom.mouseenter(performFlip);
110          $dom.mouseleave(performUnflip);
111        }
112      }
113    });
114
115    return this;
116  };
117 
118}( jQuery ));