3DMagic

Javascript

var magic3dDeg = 50; (function ( $ ) { $.fn.magic3d = function() { //Image Source finden und Image entfernen $(this).wrap('

').wrap('').addClass("magic3d_img");

  //Container erstellen
  $(".magic3d_container").append('<div class="magic3d_shine"></div>').append('<div class="magic3d_shadow"></div>');

  $(".magic3d").mousemove(function(event){
    $(this).addClass("active3d");

    var offset = $(this).offset();
    var relX = (event.pageX - offset.left);
    var relY = (event.pageY - offset.top);
    var rotX = -((relX/$(this).width())-0.5)*magic3dDeg;
    var rotY = ((relY/$(this).height())-0.5)*magic3dDeg;
    //Winkel zum Mittelpunkt im Bogenmass berechnen
    arad = Math.atan2( (relY-($(this).height()/2)) , (relX-($(this).width()/2)) );
    //Winkel in Grad zwischen 0 und 360 umwandeln
    var angle = arad * 180 / Math.PI - 90;
    if (angle < 0) {angle = angle + 360;}

    //Shine background setzen
    $(".magic3d_shine",this).css({'background':'linear-gradient('+angle+'deg, rgba(255,255,255,0.3) 0%,rgba(255,255,255,0) 80%)'});
    //Rotation setzen
    $(".magic3d_container",this).css({'transform':'rotateX('+rotY+'deg) rotateY('+rotX+'deg) scale3d(1.07,1.07,1.07)'});
  });

  //Maus Leave Event
  $(".magic3d").mouseleave(function(){
    $(this).removeClass("active3d");
    $(".magic3d_container",this).css({"transform":"scale3d(1,1,1)"});
    $(".magic3d_shine",this).css({'background':'none'});
  });
  return wrapper;

}; }( jQuery ));