master

分支 (1)

管理

管理

master

3Dcard
/
floatcard.html

<!DOCTYPE html>
<html lang="en">

<head>
    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            width: 100vw;
            height: 100vh;
            transform-style: preserve-3d;
            perspective: 500px;
        }

        #card {
            --per: 30%;
            width: 300px;
            height: 400px;
            position: relative;
            background: url('EX1_287.png');
            background-size: cover;
            /* box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5); */
        }
        #card::after {
            content: "";
            position: absolute;
            margin: auto;
            margin-top: 20px;
            width: 260px;
            height: 370px;
            display: none;
            inset: 0;
            background: url("1.gif");
            mix-blend-mode: color-dodge;
        }
        #card::before {
            margin: auto;
            margin-top: 20px;
            width: 260px;
            height: 360px;
            content:'';
            background:
            linear-gradient(
                115deg,
                transparent 0%,
                rgba(243, 252, 2, 0.288) var(--per),
                rgba(0, 0, 0, .5) calc(var(--per) + 25%),
                rgba(243, 252, 2, 0.288) calc(var(--per) + 50%),
                transparent 100%
            );
            position: absolute;
            inset: 0;
            mix-blend-mode: color-dodge;
        }
        #card:hover::after,
        #card:hover::before {
            display: block;
        }
    </style>
</head>

<body>
    <div id="card"></div>
    <script>
        const card = document.getElementById("card");
        card.onmousemove = function (e) {
            let box = card.getBoundingClientRect();
            let calcY = (e.clientX - box.x - (box.width / 2)) / -7;
            let calcX = (e.clientY - box.y - (box.height / 2)) / 7;
            card.style.transform = "rotateY(" + calcY + "deg)" + "rotateX(" + calcX + "deg) ";
            const percentage = parseInt((e.clientX - box.x) / box.width * 1000) / 10;
            card.style.setProperty("--per", `${percentage}%`);
            // card.style.boxShadow = `${-calcX}px ${-calcY}px 20px rgba(0, 0, 0, 0.5)`;
        }
        card.addEventListener('mouseleave', (e) => {
            window.requestAnimationFrame(function () {
                card.style.transform = "rotateX(0) rotateY(0)";
            });
        });
    </script>
</body>

</html>