<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        html,
        body {
            margin: 0;
            padding: 0;
            
            /*禁止文字被选中*/
            -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-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>

3D动画效果照片墙demo的更多相关文章

  1. 初识css3 3d动画效果

    (先看我博客右上角的3d盒子动画效果,目前没做兼容处理,最好最新的chrome看)无意间看到网上css3写的3d动画效果,实在炫酷,以前理解为需要js去计算去写,没想到css直接可以实现.于是开始研究 ...

  2. [MISSAJJ原创] UITableViewCell移动及翻转出现的3D动画效果［58同城cell移动效果］

    2015-11-20 很喜欢在安静的状态, 听着音乐,敲着键盘, 和代码们浓情对话, 每一份代码的积累, 都让自己觉得很充实快乐!Y(^_^)Y. 看到58同城app的cell有动画移动出现的特效,很 ...

  3. HTML5 3D动画效果

    对以前来讲,3D动画拿到网页上展示是一件非常奢侈的事情,第一是浏览器不够先进,第二是大部分只能用flash实现伪3D.HTML5的出现,让实现网页3D动画变得非常简单,当然前提是你不要再使用像IE67 ...

  4. [web前端] css3 transition属性实现3d动画效果

    cp from : https://www.cnblogs.com/chrxc/p/5123375.html transition属性是一个很强大的3d动画属性,我动手试了一下,很多在网上很火的网页动 ...

  5. css3 transition属性实现3d动画效果

    transition属性是一个很强大的3d动画属性,我动手试了一下,很多在网上很火的网页动画都可以用这个属性实现,只能说这个属性是在是太强大啦,本人在学习次属性之后才知道自己对css3的认识还是偏少, ...

  6. CSS3效果：animate实现点点点loading动画效果（一）

    实现如图所示的点点点loading效果: 一:CSS3 animation实现代码 html代码: 提交订单中<span class="ani_dot">...< ...

  7. 奇思妙想 CSS 3D 动画 | 仅使用 CSS 能制作出多惊艳的动画？

    本文将从比较多的方面详细阐述如何利用 CSS 3D 的特性,实现各类有趣.酷炫的动画效果.认真读完,你将会收获到: 了解 CSS 3D 的各种用途 激发你新的灵感,感受动画之美 对于提升 CSS 动画 ...

  8. 如何制作css3的3d动画——以骰子旋转为例，详解css3动画属性

    首先先来看两个用css3实现的炫酷的3d动画效果 1 2 3 4 5   6 你没看错,这个炫酷的效果都是用css3实现的. 下面是动画实现所需要用到的几个css3属性. 1.perspective: ...

  9. 超给力的HTML5 3D动画欣赏及源码下载

    HTML5有着非常巨大的魅力,尤其是CSS3和Cavnas,可以帮助页面渲染得非常炫酷.值得一提的是,利用HTML5的3D特性可以帮助你更加方便地在网页上实现3D动画特效.本文分享的这些HTML5 3 ...

随机推荐

  1. Jersey客户端API调用REST风格的Web服务

    Jersey 客户端 API 基础 jersey-1.14.jar 密码: cxug 要开始使用 Jersey 客户端 API,你首先需要创建一个 com.sun.jersey .api.client ...

  2. 股票K线图-JfreeChart版

    http://blog.csdn.net/ami121/article/details/3953272 股票K线图-JfreeChart版 标签: jfreechartpropertiesapplet ...

  3. Linux入门(一)常见虚拟机及Linux系统安装、xshell连接虚拟机

    1环境 linux常用两种虚拟机 1.1  oracle VM VirtualBox 官方网站:https://www.virtualbox.org/ 1.2  vmware  下载链接:https: ...

  4. Codeforces 237C

    题目: Description You've decided to carry out a survey in the theory of prime numbers. Let us remind y ...

  5. python--lambda和def函数

    1.Python lambda和Python def区别分析 Python支持一种有趣的语法,它允许你快速定义单行的最小函数.这些叫做lambda的函数,是从Lisp借用来的,可以用在任何需要函数的地 ...

  6. sublime 2

    just baidu sublime license and find a free one!

  7. properties读取的几种方法

    第一种: private static Properties prop = new Properties();     static{         try {             prop.l ...

  8. LinuxIP地址、网卡相关、克隆、VM

    改IP地址(#setup) 1.输入vi /etc/sysconfig/network-scripts/ifcfg-eth0 2.里面的内容修改为 DEVICE=eth0HWADDR=FC:4D:D4 ...

  9. 经常出现null错误之tostring

    如果需要转换的类型可能为null,如果使用tostring就可能引发错误,这时候可以使用convert.tostring方法.

  10. QML之使用Loader加载QML组件

    呵呵,今晚是边看<裸婚时代>边敲代码,那电影看得...!钱真他妈不是个东西. 盼望Meego火起来. QML的Loader元素经常备用来动态加载QML组件.可以使用source属性或者so ...