3D Schwebeflug/Bewegung auf Bild

Question

Ich fand einen coolen Effekt, wenn ein Benutzer auf dem Bild schwebt, bewegt sich das Bild um/kippt und gibt einen coolen 3D-Effekt. Ich habe unten einen Beispiellink hinzugefügt (über den Schädelbild in der Verknüpfung schweben, um den Effekt zu sehen).

Weiß jemand, wie man dies beeinflusst? Ich recherchierte aber konnte den Code nicht finden, ich möchte diesen Effekt versuchen. Ich würde wirklich jede Antwort zu schätzen wissen. Danke

Link to example

Answer 1

Es gibt eine Reihe von Möglichkeiten, um diesen Effekt zu erzielen, glaube ich, der in Code präsentiert unter eine der einfachsten ist. Es verwendet die CSS-Transformation rotate3d anstelle des komplizierteren matrix3d, das oben erwähnt und im ursprünglichen Beispiel verwendet wurde. Weitere Informationen zur Lösung finden Sie in den Kommentaren im Code.

Haftungsausschluss: Der folgende Code dient nur als Referenz, stimmt möglicherweise nicht vollständig mit den besten Best Practices der Branche überein und ist möglicherweise nicht für den Produktionseinsatz geeignet. Es wurde in der Google Chrome-Version 57.0.2987.133 getestet und basiert möglicherweise auf Funktionen, die in anderen oder älteren Browsern nicht unterstützt werden.

HTML

<div id="tracking-area"> 
    <div id="transformation-area"> 

    </div> 
</div> 

CSS

body { 
    // Padding & margins 
    margin: 0; 

    // Background 
    background-color: silver; 
} 

#tracking-area { 
    // Display & position 
    position: relative; 

    // Dimensions 
    width: 500px; 
    height: 500px; 

    // Padding & margins 
    margin: 50px auto; 

    // Border 
    border: 1px solid gray; 
} 

#transformation-area { 
    // Display & position 
    position: absolute; 
    top: 100px; 
    left: 100px; 

    // Dimensions 
    width: 300px; 
    height: 300px; 

    // Background 
    background-image: url('https://s-media-cache-ak0.pinimg.com/564x/00/7d/d2/007dd2a468e9a453da691e8e7a383973.jpg'); 
    background-size: cover; 
} 

JavaScript

Hier

// The following two numbers define the angles (in degrees) 
// that the transformation area will be rotated at about 
// X and Y axes when the cursor reaches the right (for Y) 
// and the top (for X) borders of the tracking area. 
var maxRotationDegreesX = 60; 
var maxRotationDegreesY = 60; 

// This effectively defines the distance along X axis between 
// the reference point and the projection plane. The greater the 
// number, the greater the transformation area's projection 
// is deformed due to perspective. 
var perspectivePx = 600; 

$(document).ready(function() { 
    // These variables are requried to translate screen coordinates 
    // supplied by mouse event into the coordinate system with 
    // its reference point placed in the center of the tracking area. 
    var trackingAreaShiftX = $("#tracking-area").offset().left; 
    var trackingAreaShiftY = $("#tracking-area").offset().top; 

    var halfTrackingAreaWidth = $("#tracking-area").width()/2; 
    var halfTrackingAreaHeight = $("#tracking-area").height()/2; 

    var mouseCoordinateCorrectionX = trackingAreaShiftX + halfTrackingAreaWidth; 
    var mouseCoordinateCorrectionY = trackingAreaShiftY + halfTrackingAreaHeight; 

    $("#tracking-area").on("mousemove", function() { 
     // Translate cooridnates of the mouse ponter 
     var x = event.clientX - mouseCoordinateCorrectionX; 
     var y = event.clientY - mouseCoordinateCorrectionY; 
     // Calculate degrees of rotation with respect to their maximum values 
     var rotationY = x * maxRotationDegreesX/halfTrackingAreaWidth; 
     var rotationX = -y * maxRotationDegreesY/halfTrackingAreaHeight; 
     // Construct CSS transform setting string 
     var transform = `perspective(${perspectivePx}px) rotate3d(1, 0, 0, ${rotationX}deg) rotate3d(0, 1, 0, ${rotationY}deg)`; 
     // Apply the transformation 
     $("#transformation-area").css("-webkit-transform", transform); 
     $("#transformation-area").css("-moz-transform", transform); 
     $("#transformation-area").css("-ms-transform", transform); 
     $("#transformation-area").css("-o-transform", transform); 
     $("#transformation-area").css("transform", transform); 
    }); 
}); 

ist die codepen: https://codepen.io/eduard-malakhov/pen/mmJwbZ