Effect:

Implementation code:


      
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="Width = device - width, initial - scale = 1.0">
    <title>Document</title>
    <script src=".. /js/jquery.js"></script>
</head>
<style>
    html.body {
        margin: 0;
        width: 100%;
        height: 100%;
        overflow: hidden;
        background: # 000;
        /* Radial gradient - color nodes evenly distributed */
        background-image: radial-gradient(circle at center center,rgba(252, 22, 242,0.2),rgba(0, 0));perspective: 1000px;
    }
    .box {
        position: relative;
        width: 120px;
        height: 160px;
        margin: 300px auto;
        /* Preserve-3D: All child elements are rendered in 3D space */
        transform-style: preserve-3d;
    }
    .box img {
        width: 100%;
        height: 100%;
        position: absolute;
        /* Generates a reflection */
        -webkit-box-reflect: below 10px -webkit-linear-gradient(top, rgba (0,0,0,0)0%.rgba(0,0,0,0.3) 100%);
        /* transition: all 1s linear; * /
    }
    /* .box .img1 { transform: rotateY(30deg) translateZ(300px); Transition: transform 0.5s linear 0.1s; } * /
</style>
<body>
    <div class="box">
        <img class="img1" src="./img/1.jpg" alt="">
        <img src="./img/2.jpg" alt="">
        <img src="./img/3.jpg" alt="">
        <img src="./img/4.jpg" alt="">
        <img src="./img/5.jpg" alt="">
        <img src="./img/6.jpg" alt="">
        <img src="./img/7.jpg" alt="">
        <img src="./img/8.jpg" alt="">
        <img src="./img/1.jpg" alt="">
        <img src="./img/2.jpg" alt="">
        <img src="./img/3.jpg" alt="">
        <img src="./img/4.jpg" alt="">
    </div>
</body>
</html>
<script>
    // Initialize the implementation of the licensing effect
    window.onload = function () {
        var img = $('img');
        var length = img.length;
        var deg = 360 / length;
        for (var i = 0; i < length; i++) {
            $('img').eq(i).css({
                'transform': 'rotateY(' + i * deg + 'deg) translateZ(300px)'.'transition': 'the transform 0.5 s linear' + (length - 1 - i) * 0.1 + 's',})}; bindRotateEvent(); }// Bind the rotation effect event
    function bindRotateEvent() {
        var body = $('body');
        var rotateX = 0, rotateY = 0;
        var startX, startY, nowX, nowY, changeX, changeY;
        var timer; // Buffer effect timer
        body.on('mousedown'.function(e) {
            clearInterval(timer);
            startX = e.clientX;
            startY = e.clientY;
            // Bind the mousemove event after the mouse is pressed (mouse movement)
            body.on('mousemove'.function(e) {
                nowX = e.clientX;
                nowY = e.clientY;
                // The amount of movement
                changeX = nowX - startX;
                changeY = nowY - startY;
                // console.log(' moved ${changeX} left and ${changeY} up and down);
                // Core: calculate rotateX and rotateY, rotate them proportionally
                rotateX -= changeY * 0.3; // rotateX: 3D rotation along the X axis, which is measured by the magnitude of movement up and down changeY
                rotateY += changeX * 0.3; // rotateY: 3D rotation along the Y axis, which is measured by the magnitude of left and right movement changeX

                setBoxTarnsformRotate(rotateX, rotateY); // Set the box's transform property

                startX = nowX;
                startY = nowY;
            })
        }).on('mouseup'.function(e) {
            body.off('mousemove'); // Release the mouse to unbind mousemove
            // Add buffering effect
            timer = setInterval(function() {
                // Buffering: Changes get smaller and smaller
                changeX = changeX * 0.95;
                changeY = changeY * 0.95;

                rotateX -= changeY * 0.5;
                rotateY += changeX * 0.5;
                
                setBoxTarnsformRotate(rotateX, rotateY); // Set the box's transform property

                // Small enough to clear the timer
                if (Math.abs(changeX) < 0.1 && Math.abs(changeY) < 0.1) { clearInterval(timer); }},10); })}function setBoxTarnsformRotate(rotateX, rotateY) {
        // Rotate to change the box's transform property
        var box = $('.box');

        // Rotate once and start counting again
        rotateX = rotateX % 360;
        rotateY = rotateY % 360;
        // console.log(' rotateX: ${rotateX}, rotateY: ${rotateY} ');

        // Set the box's transform property
        box.css('transform'.'rotateX(' + rotateX + 'deg) rotateY(' + rotateY + 'deg)');
    }
</script>
Copy the code