CSS实现3D相册

最新推荐文章于 2025-06-09 09:42:03 发布

原创最新推荐文章于 2025-06-09 09:42:03 发布 · 3.1k 阅读

8 ·

CC 4.0 BY-SA版权

JavaScript 专栏收录该内容

3 篇文章

订阅专栏

本文介绍了一种使用HTML和CSS实现的3D相册效果。通过设置3D旋转和平移，让一组照片从中心依次展开，同时利用JavaScript实现交互式的旋转效果。此示例提供了一个简单的3D相册展示方案。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>3DAlbum</title>
    <style>
        html,body{
            margin: 0;
            padding: 0;
        }
        body{
            width: 100%;
            height: 100%;
            background-color: #99cccc;
        }
        .album{
            perspective: 800px;
        }
        .album .photos{
            position: relative;
            width: 133px;
            height: 220px;
            margin: 150px auto;
            transform-style: preserve-3d; /*设置3d风格*/
            transform: rotateX(-10deg) rotateY(0deg);
        }
        .album .photos .photo{
            display: inline-block;
            position: absolute;
            width: 133px;
            height: 200px;
            border: 1px solid #fff;
            background-color: #ccccff;
            transition: 1s;
        }
    </style>
</head>
<body >
    <div class="album">
        <div class="photos">
            <!-- 用div元素模仿照片 -->
            <div class="photo"></div>
            <div class="photo"></div>
            <div class="photo"></div>
            <div class="photo"></div>
            <div class="photo"></div>
            <div class="photo"></div>
            <div class="photo"></div>
            <div class="photo"></div>
        </div>
    </div>
</body>
<script>
    var photos = document.querySelector(".photos");
    var photo = photos.querySelectorAll(".photo");
    var deg = 360/photo.length;
    window.onload = function(){
        for(var i=0;i<photo.length;i++){
            photo[i].style.transform = "rotateY("+deg*i+"deg) translateZ(350px)";
            //为每张图片设置延时，最后一张第一个出现
            photo[i].style.transition = "1s "+(photo.length-i)*0.1+"s";
        }
    }
    
    document.onmousedown = function(e){
            ox = e.clientX,  //鼠标按下的坐标X
            oy = e.clientY,  //鼠标按下的坐标Y
            rx = -10,        //赋给roteteX的初始值
            ry = 0;          //赋给rotateY的初始值
        this.onmousemove = function(e){
                nx = e.clientX, //鼠标拖动时的坐标X
                ny = e.clientY, //鼠标拖动时的坐标Y
                x = nx - ox,    //新旧坐标的差值
                y = ny - oy;
                rx -= y * 0.2,
                ry += x * 0.2;
            photos.style.transform = "rotateX("+rx+"deg) rotateY("+ry+"deg)";
            ox = nx;            //新值变旧值
            oy = ny;
        }
        this.onmouseup = function(){
            //减速
            var timer = setInterval(function(){
                x *= 0.8; 
                y *= 0.8;
                
                rx -= y * 0.2,
                ry += x * 0.2;

                photos.style.transform = "rotateX("+rx+"deg) rotateY("+ry+"deg)";
                if(Math.abs(x)<0.1 && Math.abs(y)<0.1){
                    clearInterval(timer);
                }
            },13);

            this.onmousemove = null;
        }
    }
</script>
</html>

效果截图：

用div元素模仿img元素，实现照片从中心依次旋出，画风有点丑，有点抽象，请见谅！