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