制作一个简单3D相册

最新推荐文章于 2022-08-30 14:01:41 发布

南风知我意f

最新推荐文章于 2022-08-30 14:01:41 发布

阅读量6.5k

点赞数 14

文章标签： 3D相册

本文链接：https://blog.csdn.net/qq_45323204/article/details/95497793

版权

- 用到的点：

旋转
- 2D 旋转
  transform: rotate(值deg) deg 角度的单位
- 3D 旋转
  
  transform:rotateX rotateY roteteZ
  如果让一个块实现3D效果，必须做两件事：
  1、在要实现3D效果的块上加transform-style:preserve-3D (声明)
  2、在要实现3D效果的块的父元素上加一个镜头的距离
  一般范围为（800~1200px）
  用法：perspective:800px~1200px;
  平移：transform:translateX(0px) translateY() translateZ()
背景图
background:url(‘图片的路径’)
什么都不设置的话，图片小于边框大小，会出现平铺现象，要使图片不平铺的话，

background:url(‘图片的路径’) no- repeat(不平铺)
repeat-x 只沿X轴平铺
repeat-y 只沿Y轴平铺

background-size:200px 500px；设置背景图大小但是可能会使图片失帧。

效果图：
在这里插入图片描述

    <!DOCTYPE html>
    <html>
    <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>Document</title>
        <style>
            /* 去掉浏览器自动的边距 */
        *{
            margin: 0;
            padding: 0;
        }
        /* 整个背景设置为全黑 */
        body{
            background-color: #000;
        }
        /* 设置照片的大小，及居中到浏览器 */
        .wrap{
            width: 133px;
            height: 200px;
            margin: 200px auto; 
            /* 添加一个3D镜头 */
            perspective:1200px; 
        }
        /* 
        设置里面所有照片的大小 及相对位置
        */
        .content{
            height: 100%;
            position: relative;
            /* 声明 3D样式 */
            transform-style:preserve-3d;
            transform: rotateX(-12deg);
        }
        /* 设置各个单独照片的大小、相对位置、阴影等样式 */
        .content>div{
            width:100%;
            height: 100%;
            position: absolute;
            top: 0;
            left: 0;
            box-shadow: 1px 1px 10px rgb(248, 142, 216);
            border-radius: 7px;
            /* 添加一个倒影 */
            -webkit-box-reflect: below 10px;
        }
             /* 添加一个底 并设置样式 */
        .content .di{
            width: 800px;
            height: 800px;
            position:absolute;
            top: 100%;
            left: 50%;
            margin-left: -400px;
            margin-top: -400px;
            border-radius: 400px;
            transform: rotateX(90deg);
            background:-webkit-radial-gradient(center center , 400px 400px ,rgba(247, 60, 175,1), rgba(0,0,0,0) );
        }
        </style>
    </head>
    <body>
        <div class="wrap">
            <div class="content">
                <p class="di">
    
                </p>
            </div>
        </div>
    </body>
    <script src="jquery.min.js"></script>
    <script>  
            // 入口函数  
        $(function(){
            // 调用方法
            creatediv();
            let xdeg=-12;
            let ydeg=0;
            // 添加一个鼠标移动事件
            $(document).mousedown(function(event){
                //鼠标按下，打开开关
                let flag = true;   
                //记录鼠标按下时刻 X轴 Y轴的 坐标
                let stratx = event.pageX||event.clientX;
                let straty = event.pageY||event.clientY;
                // 添加鼠标移动事件
                $(document).mousemove(function(ev){
                    // 当开关为 ture 时 生效
                    if(flag){
                        //读取鼠标当前的位置
                        let movex = ev.pageX||ev.clientX;
                        let movey = ev.pageY||ev.clientY;
                        // 计算旋转的角度 
                        xdeg = xdeg + (movey-straty)*0.1;
                        ydeg = ydeg + (movex-stratx)*0.1;
                        // 旋转 平移 各个照片
                        $(".content").css({
                            "transform":"rotateX("+xdeg+"deg) rotateY("+ydeg+"deg)"
                    });
                    // 初始化 鼠标的位置
                    stratx = movex;
                    straty = movey;
                    }
                    //当鼠标放开时，结束事件
                }).mouseup(function(){
                    flag = false;
                });
            });
            // 创建一个方法 导入所有的图片 并设置样式
            function creatediv(){
                // 利用for 循环 依次导入11 张图片   
                //这里图片的命名是有顺序的 分别为 1.jpf 2.jpg 3.jpg...
                for(let i=1;i<=11;i++){
                    let $div=$("<div></div>");
                    // 计算旋转的角度
                    let r = 360/11*(i-1);
                    let time = (i-1)*0.3;
                    // 导入图片
                    //  第一个样式 图片全部重叠在中心
                    $div.css({
                        "background":"url(img/"+i+".jpg)",
                    });
                    // 将所有图片导入到 div 标签中
                    $(".content").append($div);
                    //  setTimeout(function() 设置样式的发生顺序   
                    //  这里是第一个样式发生后 100ms  后再发生第二个
                    setTimeout(function(){
                        // 第二个样式  图片均匀分散。
                        $div.css({
                        "transform":"rotateY("+r+"deg) translateZ(400PX)",
                        "transition":"1s "+time+"s",
                    },100)
                    });
                }
            }
        });
    </script>
    </html>

南风知我意f

关注

14
点赞
踩
64

收藏

觉得还不错? 一键收藏
8
评论
制作一个简单3D相册

- 用到的点：旋转2D 旋转transform: rotate(值deg) deg 角度的单位3D 旋转transform:rotateX rotateY roteteZ如果让一个块实现3D效果，必须做两件事： 1、在要实现3D效果的块上加transform-style:preserve-3D (声明) 2、在要实现3D效果的块的父元素上加一个镜头的距离...
复制链接

扫一扫