【前端】CSS+HTML+DOM实现3D卡片

热爱前端，学习前端

于 2024-09-25 23:36:14 发布

阅读量343

点赞数 2

分类专栏：前端文章标签：前端 css html

本文链接：https://blog.csdn.net/weixin_61972561/article/details/142535732

版权

前端专栏收录该内容

22 篇文章 0 订阅

订阅专栏

效果
在这里插入图片描述
代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .card{
            width: 300px;
            height: 400px;
            border-radius: 40px;
            background-color: #3296d8;
            margin: 200px auto;
            transition: 0.1s;
            box-shadow: -4px -4px 12px #2c2c2b, 4px 4px 13px #3e3e3c;
            /* 实现3D效果 */
            transform: perspective(400px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) ;
        }
    </style>
</head>
<body>
    <div class="card">
    </div>
</body>
<script>
    let yRange=[-10,10]
    let xRange=[-10,10]
    let cardDom = document.querySelector('.card')
    function getRotate(range,value,max){
        return value/max*(range[1]-range[0])+range[0]
    }
    cardDom.onmousemove = (e)=>{
        const { offsetX,offsetY} = e
        const { offsetWidth,offsetHeight} =cardDom 
        const ry = -getRotate(yRange,offsetX,offsetWidth)
        const rx = getRotate(xRange,offsetY,offsetHeight)
        cardDom.style.setProperty('--rx',`${rx}deg`)
        cardDom.style.setProperty('--ry',`${ry}deg`)
    }
    cardDom.onmouseout = (e)=>{
        cardDom.style.setProperty('--rx',"0deg")
        cardDom.style.setProperty('--ry',"0deg")
    }
</script>
</html>