3D悬停/移动图像

Question

我发现一个很酷的效果，当用户在图像上悬停时，图像移动/倾斜，给出一个很酷的3D效果。我在下面添加了一个示例链接（将鼠标悬停在链接中的头骨图像上以查看效果）。

有谁知道如何做到这一点？我研究过，但无法找到代码，我想尝试这种效果。我真的很感激任何答案。谢谢

Link to example

Answer 1

有多种方式来实现这个效果，我相信下面的代码中呈现的是最简单的一种。它利用CSS变换rotate3d而不是上面提到的更复杂的matrix3d，并在原始示例中使用。有关该解决方案的更多详细信息，请参阅代码中的注释。

免责声明：以下代码仅供参考，可能不完全符合最佳行业最佳实践，可能不适合用于生产用途。它已经在谷歌浏览器版本57.0.2987.133中测试过，并且可能依赖其他或旧版浏览器不支持的功能。

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

// 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); 
    }); 
}); 

这里是codepen：https://codepen.io/eduard-malakhov/pen/mmJwbZ