鼠标放在图片上，图片3D倾斜

image

 

<!DOCTYPE html>
<html>
    <head>
        <style>
            .wrapper {
                display: flex;
                justify-content: center;
                align-items: center;
                width: 100%;
                height: 100vh;
                background: linear-gradient(135deg, #0a0a0a 0%, #1a1a2e 100%);
                perspective: 1000px;
            }

            .cardImg {
                width: 400px;
                height: 250px; /* 固定高度确保效果一致 */
                object-fit: cover; /* 保持图片比例 */
                border-radius: 16px;
               
                /* 3D变换 */
                transform:
                    rotateX(var(--rotateX, 0deg))
                    rotateY(var(--rotateY, 0deg))
                    translateZ(50px);
               
                /* 过渡 */
                transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
               
                /* 3D设置 */
                transform-style: preserve-3d;
               
                /* 多重阴影和光效 */
                box-shadow:
                    0 0 0 1px rgba(255, 255, 255, 0.1),
                    0 15px 35px rgba(0, 0, 0, 0.5),
                    0 5px 15px rgba(0, 0, 0, 0.3);
               
                /* 反射光效果 */
                position: relative;
                overflow: hidden;
            }

            .cardImg::before {
                content: '';
                position: absolute;
                top: 0;
                left: 0;
                right: 0;
                bottom: 0;
                background: linear-gradient(
                    135deg,
                    transparent 0%,
                    rgba(255, 255, 255, 0.1) 50%,
                    transparent 100%
                );
                opacity: 0;
                transition: opacity 0.3s;
                pointer-events: none;
                z-index: 2;
            }

            .cardImg:hover::before {
                opacity: 0.6;
            }

            .cardImg:hover {
                box-shadow:
                    0 0 0 1px rgba(255, 255, 255, 0.2),
                    0 25px 50px rgba(0, 0, 0, 0.7),
                    0 10px 20px rgba(0, 0, 0, 0.4);
                transform:
                    rotateX(var(--rotateX, 0deg))
                    rotateY(var(--rotateY, 0deg))
                    translateZ(80px)
                    scale(1.05);
            }
        </style>
    </head>
    <body>
        <div class="wrapper">
            <img class="cardImg" src="./1.jpg" alt="3D card">
        </div>
       
        <script>
            const cardImg = document.querySelector('.cardImg');
           
            // 旋转角度范围
            const rotateRange = 20; // 最大旋转角度
           
            cardImg.addEventListener('mousemove', (e) => {
                const { offsetX, offsetY } = e;
                const { offsetWidth, offsetHeight } = cardImg;
               
                // 计算旋转角度
                // offsetX / offsetWidth 范围是 0-1，减去0.5得到 -0.5 到 0.5
                const rotateY = -((offsetX / offsetWidth) - 0.5) * rotateRange * 2; // -20 到 20
                const rotateX = -(0.5 - (offsetY / offsetHeight)) * rotateRange * 2; // -20 到 20
               
                // 设置CSS变量
                cardImg.style.setProperty('--rotateX', `${rotateX}deg`);
                cardImg.style.setProperty('--rotateY', `${rotateY}deg`);
            });
           
            cardImg.addEventListener('mouseleave', () => {
                // 平滑回到初始状态
                cardImg.style.setProperty('--rotateX', '0deg');
                cardImg.style.setProperty('--rotateY', '0deg');
            });
        </script>
    </body>
</html>
posted @ 2026-01-29 21:50  37点2度  阅读(5)  评论(0)    收藏  举报