使用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. 2017实习【Java研发】面经

    标签: 实习 面经 Java研发 阿里.腾讯.华为 找2017暑假实习,经历过被腾讯拒绝的无奈,也有拿到阿里和华为offer的喜悦,找实习过程也有一段时间了,在此把之前的面试知识点和经历做个小总结,以 ...

  2. BZOJ 3438 小M的作物 & BZOJ 1877 [SDOI2009]晨跑

    我由衷地为我的朋友高兴.哈哈,yian,当你nick name破百上千时,再打“蒟蒻”就会被打的. 好的,说正事吧.请注意,这还是题解.但我发现,网络流实在是太套路了(怪不得这两年几乎销声匿迹).我们 ...

  3. golang管道

    golang中的channel channel用于goroutine之间的通信 如果不用channel,使用共享全局变量的方式,需要加锁 // synchornized 同步 // golang中的 ...

  4. 火狐，discuz同步登录问题解决

    <script type="text/javascript" src="http://******/uc/api/uc.php?time=1503386589&am ...

  5. P3355 骑士共存问题

    P3355 骑士共存问题 题目描述 在一个 n*n (n <= 200)个方格的国际象棋棋盘上,马(骑士)可以攻击的棋盘方格如图所示.棋盘上某些方格设置了障碍,骑士不得进入 对于给定的 n*n ...

  6. openstack开发环境与代码测试

    一.openstack单组件开发环境 1.Python虚拟环境搭建 主要参考文献: https://virtualenv.pypa.io/en/latest/virtualenv.html 说明:Py ...

  7. webApp 页面适配布局

    webApp 页面布局 1. 流式布局 概念: 流式布局是页面元素宽度按照屏幕分辨率进行适配调整,但是整体布局不变. 设计方法: 布局都是通过百分比来定义宽度,但是高度大都是用px固定的. 弊端: 虽 ...

  8. 基于Ubuntu16.04搭建WordPress

    安装 Apache2 在终端输入该命令 ,使用 apt-get 安装 Apache2: sudo apt-get install apache2 -y 安装好后,您可以通过访问实验室IP地址 http ...

  9. JavaScript 运行机制之执行顺序详解

    JavaScript是一种描述型脚本语言,它不同于 Java 或 C# 等编译性语言,它不需要进行编译成中间语言,而是由浏览器进行动态地解析与执行.如果你不能理解 JavaScript 语言的运行机制 ...

  10. Scala2.10.4在CentOS7中的安装与配置

    随着基于内存的大数据计算框架——spark的火爆流行,用于编写spark内核的Scala语言也随之流行开来.由于其编写代码的简洁性,受到了越来越多程序员的喜爱.我今天给大家展示的时Scala2.10. ...