使用JS和CSS实现图片的3D透视效果及动画

原创

已于 2022-10-16 20:21:41 修改 · 2k 阅读

标签

#javascript #css #3d

收录于

于 2022-10-16 20:14:27 首次发布

文章目录

实现效果
代码
项目地址

实现效果

3D透视图演示

代码

HTML代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>3D透视图</title>
</head>
<body>
    <div id="position">
        <div id="scale">
            <div id="container"></div> /* 图片容器 */
            <div id="scaleCur"></div> /* 用来缩放图片 */
        </div>
    </div>
</body>

CSS代码

<style>
    #position {
     
     

        background-color:slategray;
    }
    #scale {
     
     
        position: absolute;
        display: grid;
        grid-template-columns: auto 10px;
        grid-template-rows: auto 10px;
        width: 760px;
        height: 460px;
        background-color: black;
        
    }
    #container {
     
     
        grid-column: 1/2;
        grid-row: 1/2;
        transform-style: preserve-3d;
    }
    #scaleCur {
     
     
        grid-column: 2/3;
        grid-row: 2/3;
        background-color: black;
        cursor: se-resize;
    }
    img {
     
     
        display