Question

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

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

Answer 1

有很多方法可以达到这个效果，我相信下面的代码中提供的是最简单的方法之一。它使用CSS变换matrix3d而不是上面提到的更复杂的<div id="tracking-area"> <div id="transformation-area"> </div> </div>并在原始示例中使用。有关该解决方案的更多详细信息，请参阅代码中的注释。

免责声明：以下代码仅供参考，可能不完全符合最佳行业最佳做法，可能不适合生产使用。它已在Google Chrome版本57.0.2987.133中进行了测试，可能依赖于其他或旧版浏览器不支持的功能。

<强> HTML

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

<强> CSS

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

<强> 的JavaScript

{{1}}

以下是codepen：https://codepen.io/eduard-malakhov/pen/mmJwbZ

3d悬停/移动图像

1 个答案: