使用html+css+js实现3D相册，快来上传的照片吧

效果图：

代码如下，复制即可用：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        html,

        body {

            margin: 0;

            padding: 0;

            background-color: #29454d;

            /*禁止文字被选中*/

            -moz-user-select: none;

            /*火狐*/

            -webkit-user-select: none;

            /*webkit浏览器*/

            -ms-user-select: none;

            /*IE10*/

            -khtml-user-select: none;

            /*早期浏览器*/

            user-select: none;

            overflow: hidden;

        }

        .box {

            position: relative;

            height: 500px;

            width: 500px;

            margin: 100px auto;

            transform-style: preserve-3d;

            perspective: 2000px;

        }

        .di {

            position: absolute;

            left: 50%;

            top: 50%;

            height: 200px;

            width: 200px;

            transform: translate(-50%, -50%) rotatex(90deg);

            transform-style: preserve-3d;

        }

        .z {

            position: relative;

            height: 200px;

            width: 200px;

            border-radius: 50%;

            transform-style: preserve-3d;

            /*transform: rotatez(1deg);*/

        }

        p {

            margin: 0;

            position: absolute;

            top: 0;

            /*为了保证圆心在父盒子中心，父盒子旋转时圆心稳定，所以设置left*/

            left: 25px;

            height: 200px;

            width: 150px;

            border: 2px solid #fd7068;

            box-sizing: border-box;

            background-color: #ffffff;

            background-size: cover;

            background-position: center;

            background-repeat: no-repeat;

            /*opacity: .7;*/

            font-size: 10px;

            line-height: 200px;

            text-align: center;

            /*box-shadow: 0 0 100px #16ff8b;*/

            /*倒影，不兼容*/

            -webkit-box-reflect: below 10px -webkit-linear-gradient(top, rgba(250, 250, 250, 0), rgba(250, 250, 250, .0) 30%, rgba(250, 250, 250, 0.5));

            box-reflect: below 10px -webkit-linear-gradient(top, rgba(250, 250, 250, 0), rgba(250, 250, 250, .0) 30%, rgba(250, 250, 250, 0.5));

            /*backface-visibility: hidden;*/

        }

    </style>

</head>

<body>

<div class="box">

    <div class="di">

        <div class="z">

            <p>可以拖拽图片文件进来</p>

            <p>可以拖拽图片文件进来</p>

            <p>可以拖拽图片文件进来</p>

            <p>可以拖拽图片文件进来</p>

            <p>可以拖拽图片文件进来</p>

            <p>可以拖拽图片文件进来</p>

            <p>可以拖拽图片文件进来</p>

            <p>可以拖拽图片文件进来</p>

            <p>可以拖拽图片文件进来</p>

            <p>可以拖拽图片文件进来</p>

            <p>可以拖拽图片文件进来</p>

            <p>可以拖拽图片文件进来</p>

        </div>

    </div>

</div>

<script>

    window.onload = function () {

        setPs();

        move();

        drop();

    }

        //给每个p标签设置位置

    function setPs() {

        var ps = document.getElementsByTagName('p');

        for (var i = 0; i < ps.length; i++) {

            ps[i].style.transform = 'rotatex(-90deg) rotatey(' + i * 30 + 'deg) translatez(400px)'

        }

    }

    //鼠标拖动旋转

    function move() {

        var zBox = document.querySelector('.z');

        var xBox = document.querySelector('.di');

        //声明计算鼠标移动速度用的变量

        var speedTimer = null;

        var speedX = 0;

        var speedY = 0;

        //声明记录旋转角度的两个变量

        var xDegNow = 90;

        var zDegNow = 0;

        //声明变量记录要旋转的角度

        var xDegDistance = 0;

        var zDegDistance = 0;

        //声明变量记录是否发生鼠标移动事件

        var isMove = false;

        window.onmousedown = function (e) {

            //鼠标按下

            //清除过渡属性

            xBox.style.transition = '';

            zBox.style.transition = '';

            //记录按下的坐标以及计算速度的初始坐标

            var xstart = e.clientX;

            var speedX_start = xstart;

            var ystart = e.clientY;

            var speedY_start = ystart;

            //记录用来计算速度的初始时间

            var tstart = new Date().getTime();

            var tnow = tstart;

            //设置计时器更新计算速度的当时时间

            speedTimer = setInterval(function () {

                tnow = new Date().getTime();

            },10)

            window.onmousemove = function (e) {

                //鼠标移动

                isMove = true;

                //记录当时的坐标计算距离

                var xnow = e.clientX;

                var ynow = e.clientY;

                var xDistance = xnow - xstart;

                var yDistance = ynow - ystart;

                //如果计时超过一定时间（10毫秒），计算速度

                if (tnow - tstart >= 10) {

                    //速度=（现在的坐标-初始坐标）/（现在时间-初始时间）

                    speedX = (xnow - speedX_start) / (tnow - tstart);

                    speedY = (ynow - speedY_start) / (tnow - tstart);

                    //让初始时间和坐标等于现在的时间和坐标

                    tstart = tnow;

                    speedX_start = xnow;

                    speedY_start = ynow;

                }

                //把鼠标移动距离计算成角度后设置到页面上

                zDegDistance = zDegNow - (xDistance / 10);

                zBox.style.transform = 'rotatez(' + zDegDistance + 'deg)';

                xDegDistance = xDegNow - (yDistance / 10);

                xDegDistance = xDegDistance > 179 ? 179 : xDegDistance < 1 ? 1 : xDegDistance;

                xBox.style.transform = 'translate(-50%,-50%) rotatex(' + xDegDistance + 'deg)';

            };

        };

        window.onmouseup = function (e) {

            //鼠标松开

            //清除计时器 清除鼠标移动事件

            clearTimeout(speedTimer);

            window.onmousemove = null;

            //判断如果发生移动

            if (isMove) {

                //添加过渡属性

                xBox.style.transition = 'all 0.5s ease-out';

                zBox.style.transition = 'all 0.5s ease-out';

                //根据速度计算目标角度，设置到页面上

                zDegDistance = zDegDistance - (speedX * 10);

                zBox.style.transform = 'rotatez(' + zDegDistance + 'deg)';

                xDegDistance = xDegDistance - (speedY * 10);

                xDegDistance = xDegDistance > 179 ? 179 : xDegDistance < 1 ? 1 : xDegDistance;

                xBox.style.transform = 'translate(-50%,-50%) rotatex(' + xDegDistance + 'deg)';

                //记录当前角度的值更新

                xDegNow = xDegDistance;

                zDegNow = zDegDistance;

                //用到的变量重置

                isMove = false;

                speedX = 0;

                speedY = 0;

                xDegDistance = 0;

                zDegDistance = 0;

            }

        };

    }

    //鼠标拖拽文件

    function drop() {

        //取消鼠标拖拽文件进入窗口的默认行为

        window.ondragover = function (e) {

            e.preventDefault();

        }

        window.ondrop = function (e) {

            e.preventDefault();

        }

        //添加拖拽到p标签的事件

        var ps = document.getElementsByTagName('p');

        for (var i = 0; i < ps.length; i++) {

            ps[i].index = i;

            ps[i].ondrop = function (e) {

                var w = new FileReader();

                w.index = this.index;

                w.readAsDataURL(e.dataTransfer.files[0]);

                w.onload = function () {

                    ps[this.index].style.backgroundImage = 'url(' + w.result + ')';

                    ps[this.index].innerHTML = '';

                }

            }

        }

    }

</script>

</body>

</html>

如有错误，请联系我改正，非常感谢！！！

使用html+css+js实现3D相册的更多相关文章

  1. 解惑：如何使用html+css+js实现旋转相册，立方体相册等动画效果

    解惑:如何使用html+css+js实现旋转相册,立方体相册等动画效果 一.前言 最初还是在抖音上看到可以使用简单地代码实现炫酷的网页效果的,但是想要找到可以运行的代码还是比较困难的,最近突然想起就在 ...

  2. js和CSS3炫酷3D相册展示

    <!doctype html> <html> <head> <meta charset="UTF"> <title>js ...

  3. 使用Jquery.js框架和CSS3实现3D相册的制作

    有关3D相册的制作主要包括以下几个知识点: 1.有关图片的位置摆放,也就是一个相对定位绝对定位的使用: 2.有关CSS3中transform属性的使用(transform-style: preserv ...

  4. 基于CSS3和jQuery实现的3D相册

    天我们再来看一款HTML5 3D相册浏览应用,图片可以手动播放,也可以自动播放,效果非常震撼,赶紧把这款HTML5 3D相册分享给你的朋友吧. 在线预览   源码下载 实现的代码: <div c ...

  5. 使用webgl(three.js)创建3D机房，3D机房微模块详细介绍(升级版二)

    序: 上节课已经详细描述了普通机房的实现过程,文章地址(https://www.cnblogs.com/yeyunfei/p/10473021.html) 紧接着上节课的内容 我们这节可来详细讲解机房 ...

  6. 使用webgl(three.js)创建3D机房(升级版)-普通机房

    序: 目前市面上的数据中心主要分两大类,一类属于普通数据中心,机柜按照XY轴 有序排放,一类属于微模块集合的数据中心,多个机柜组合而成的微模块.  本节课主要详细讲解普通数据中心的可视化展示,浏览器直 ...

  7. 前端工程师面试问题归纳（一、问答类html/css/js基础）

    一.参考资源 1.前端面试题及答案整理(一) 2.2017年前端面试题整理汇总100题 3.2018最新Web前端经典面试试题及答案 4.[javascript常见面试题]常见前端面试题及答案 5.W ...

  8. 一个小公司的前端笔试HTML CSS JS

    网上有这套题的答案,版本也很多,我做了很多参考.本文就当个小笔记,可能有错误,还望指正~ 第1章  Html篇 1. 你做的网页在哪些浏览器测试过?这些浏览器的内核分别是什么? 浏览器类型 内核 Fi ...

  9. three.js 运行3D模型

    HTML  <!DOCTYPE html> <html style="height: 100%;"> <head> <title>m ...

随机推荐

  1. C++ std::allocator<T> 与new对比效率使用

    基础知识通道:http://blog.csdn.net/Xiejingfa/article/details/50955295 C/C++: #include <iostream> #inc ...

  2. iterm2切换显示屏vim乱行解决

    http://note.youdao.com/noteshare?id=5aec9d82cc3a95b6909e9966b4aa3227

  3. hdu 3068

    最长回文 Time Limit: 4000/2000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Total Submis ...

  4. .gitignore 无效问题

    利用.gitignore过滤文件,如编译过程中的中间文件,等等,这些文件不需要被追踪管理. 现象: 在.gitignore添加file1文件,以过滤该文件,但是通过Git status查看仍显示fil ...

  5. React.js基础入门

    本文主要是针对React的一些demo教程.参考了菜鸟教程中的react教程,做了一些总结.Demo的下载链接是 https://github.com/RealAndMe/react-demo 下面要 ...

  6. TOMCAT添加管理用户认证

    添加配置文件 --原配置文件: # tail -5 /usr/local/tomcat/conf/tomcat-users.xml <user username="tomcat&quo ...

  7. 【BZOJ】4559: [JLoi2016]成绩比较 计数DP+排列组合+拉格朗日插值

    [题意]n位同学(其中一位是B神),m门必修课,每门必修课的分数是[1,Ui].B神碾压了k位同学(所有课分数<=B神),且第x门课有rx-1位同学的分数高于B神,求满足条件的分数情况数.当有一 ...

  8. mysql手工注入步骤

    1.一般用 '  "  ) 等符号来闭合,再用%23(即#)来注释后面语句. 2.查找数据库,先用order by n猜字段,再用union select 1,2,3 ...n%23来查询. ...

  9. [Openwrt 扩展上篇]USB挂载&U盘启动&Samba共享

    最近偷懒,没学习,反想起自己的路由刷了Openwrt,正好闲置了一个硬盘想拿来做个网络硬盘,于是开始了折腾....这里将不谈论如何刷Openwrt,如何ssh,如何添加PPOE,如何添加相对应服务的包 ...

  10. 十大opengl教程

    正文: 1． http://nehe.gamedev.net/ 这个是我觉得全世界最着名的OpenGL教程,并且有网友将其中48个教程翻译成了中文http://www.owlei.com/Dancin ...