使用html+css+js实现3D相册

使用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相册的更多相关文章

解惑：如何使用html+css+js实现旋转相册，立方体相册等动画效果
解惑:如何使用html+css+js实现旋转相册,立方体相册等动画效果一.前言最初还是在抖音上看到可以使用简单地代码实现炫酷的网页效果的,但是想要找到可以运行的代码还是比较困难的,最近突然想起就在 ...
js和CSS3炫酷3D相册展示
<!doctype html> <html> <head> <meta charset="UTF"> <title>js ...
使用Jquery.js框架和CSS3实现3D相册的制作
有关3D相册的制作主要包括以下几个知识点: 1.有关图片的位置摆放,也就是一个相对定位绝对定位的使用: 2.有关CSS3中transform属性的使用(transform-style: preserv ...
基于CSS3和jQuery实现的3D相册
天我们再来看一款HTML5 3D相册浏览应用,图片可以手动播放,也可以自动播放,效果非常震撼,赶紧把这款HTML5 3D相册分享给你的朋友吧. 在线预览源码下载实现的代码: <div c ...
使用webgl(three.js)创建3D机房，3D机房微模块详细介绍(升级版二)
序: 上节课已经详细描述了普通机房的实现过程,文章地址(https://www.cnblogs.com/yeyunfei/p/10473021.html) 紧接着上节课的内容我们这节可来详细讲解机房 ...
使用webgl(three.js)创建3D机房(升级版)-普通机房
序: 目前市面上的数据中心主要分两大类,一类属于普通数据中心,机柜按照XY轴有序排放,一类属于微模块集合的数据中心,多个机柜组合而成的微模块. 本节课主要详细讲解普通数据中心的可视化展示,浏览器直 ...
前端工程师面试问题归纳（一、问答类html/css/js基础）
一.参考资源 1.前端面试题及答案整理(一) 2.2017年前端面试题整理汇总100题 3.2018最新Web前端经典面试试题及答案 4.[javascript常见面试题]常见前端面试题及答案 5.W ...
一个小公司的前端笔试HTML CSS JS
网上有这套题的答案,版本也很多,我做了很多参考.本文就当个小笔记,可能有错误,还望指正~ 第1章 Html篇 1. 你做的网页在哪些浏览器测试过?这些浏览器的内核分别是什么? 浏览器类型内核 Fi ...
three.js 运行3D模型
HTML <!DOCTYPE html> <html style="height: 100%;"> <head> <title>m ...

随机推荐

Java EE之会话
1.需要会话的原因所有HTTP服务器技术都普遍采用HTTP会话的概念,并且Java EE也在规范中添加了对会话的支持. 维持状态会话用于维持请求和请求之间的状态.HTTP请求自身是完全无状态的.从 ...
使用Dom4解析xml
XML是一种通用的数据交换格式,它的平台无关性.语言无关性.系统无关性.给数据集成与交互带来了极大的方便. XML在不同的语言环境中解析方式都是一样的,只不过实现的语法不同而已. XML的解析方式分为 ...
JsonTools
public class JsonTools { /// <summary> /// Generate Json string from the object /// </summa ...
bzoj1027【JSOI2007】合金
题目描述某公司加工一种由铁.铝.锡组成的合金.他们的工作很简单.首先进口一些铁铝锡合金原材料,不同种类的原材料中铁铝锡的比重不同.然后,将每种原材料取出一定量,经过融解.混合,得到新的合金.新的合金 ...
ES6学习（一）搭建环境
作为一名后端小开发,业务工作需要将后台系统重构一番,许多同事都已经使用前后分离搭建项目,为了不拖后腿自己在家摸索ES6的新特性,真心不知道什么ES3,ES5,一上来就开始搞ES6,在此留下学习笔记,方 ...
js正则取出一个字符串小括号中的内容
var aa="ldfjsldfj(dsfasjfj3124123)"; var result = aa.match(/$([^)]*)$/); // 此时result＝[&q ...
R语言缺失值高级处理方法
0 引言对于一些数据集,不可避免的出现缺失值.对缺失值的处理非常重要,它是我们能否继续进行数据分析的关键,也是能否继续大数据分析的数据基础. 1 缺失值分类在对缺失数据进行处理前,了解数据缺失的机 ...
error: Failed to start domain lb error: Failed to activate service 'org.freedesktop.machine1': timed out 报错的解决办法
能正常查看kvm虚拟机列表: virsh list 但在执行virsh start lb启动虚拟机时卡顿了好几秒,然后报以下错误: error: Failed to start domain lber ...
ElasticStack系列之十 & 生产中的问题与解决方案
1. 由 gc 引起节点异常问题: 因为 gc 时会使 jvm 停止工作,如果某个节点 gc 时间过长,master ping 3次(zen discovery默认 ping 失败重试 3 次)不通 ...
1082 线段树练习 3 && 树状数组区间修改区间查询
1082 线段树练习 3 题意: 给定序列初值, 要求支持区间修改, 区间查询 Solution 用树状数组, 代码量小, 空间占用小巧用增量数组, 修改时在 $l$ 处 $ + val$ , ...

使用html+css+js实现3D相册

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

随机推荐

热门专题