使用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. netbeans工具使用xdebug断点调试php源码

    对有有经验的程序员,使用echo.print_r().print_f().var_dump()等函数足以调试php代码,如果需要在IDE工具中使用断点调试,xdebug就是一个非常好的php调试工具. ...

  2. 不同tab下的列表长度不同，tab的样式和底部的位置不同

    要求:当点击不同的tab时,被点击的tab样式不同,产生不同的列表.当列表长度大于屏幕高度时,底部随列表显示:当列表长度小于屏幕高度时,底部固定在屏幕的底部. demo: <!DOCTYPE h ...

  3. 【bzoj4231】回忆树

    题解: 树上的串匹配,模式串的总长$|S|$,令$\overline {S} $为$S$的反串: 对$S$和$\overline {S} $分别建自动机 $u -> v$可以分成三个部分去统计 ...

  4. 【agc019F】Yes or No

    Portal -->agc019F Description 给你\(n+m\)个询问,其中\(n\)个的答案是\(Yes\),\(m\)个的答案是\(No\),现在依次回答这些询问,每回答一个询 ...

  5. svn提交失败 ：“svn: E200007: Commit failed”

    引言: 在切换subversion服务器地址之后,发生的无法正确提交代码的问题org.apache.subversion.javahl.ClientException: svn: E200007: C ...

  6. linux命令总结之route命令

    route命令用于显示和操作IP路由表.要实现两个不同的子网之间的通信,需要一台连接两个网络的路由器,或者同时位于两个网络的网关来实现.在Linux系统中,设置路由通常是 为了解决以下问题:该Linu ...

  7. Python面向对象补充以及异常处理

    面向对象相关内容 一.isinstance(obj, cls) 检查是否obj是否是类 cls 的对象 class Foo(object): pass obj = Foo() isinstance(o ...

  8. P2684 搞清洁

    P2684 搞清洁 给定一段区间及若干个线段, 求使区间被完全覆盖所需的最少线段数 错误日志: 菜 Solution 补一下贪心吧 这题最小线段覆盖 首先按照左端点排序 现在对于所有左区间到达目前已覆 ...

  9. java基础-System类常用方法介绍

    java基础-System类常用方法介绍 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.System类概念 在API中system类介绍的比较简单,我们给出定义,system中 ...

  10. UIScrollView原理

    我是Mike Ash的Let’s Build…系列文章的忠实粉丝,在这一系列文章中他从头设计Cocoa的控件来解释他们的工作原理.在这里我要做一点类似的事情,用几行代码来实现我自己的滚动试图.不过首先 ...