<!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>

转载于:https://www.cnblogs.com/CCDS01/p/6286683.html

3D动画效果照片墙demo相关推荐

  1. php 3d animation,如何用HTML5的Canvas制作3D动画效果

    HTML5的诞生给web前端界带来了不小轰动,像什么动画旋转.图片滑块.图片轮播等等这些3D特效,也引发了不少朋友想要学习HTML5的好奇心.最近我一直在做canvas动画效果,发现canvas这个东 ...

  2. android 动画x轴旋转,Android Roate3dAnimation实现围绕y轴竖直方向或者绕x轴方向旋转的3d动画效果...

    概要: ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ Roate3dAnim ...

  3. 7 款基于 HTML5 Canvas 的超炫 3D 动画效果

    在以前,想要在浏览器中实现3D动画效果是非常困难的,但是自从HTML5诞生之后,这就变得十分简单了.遗憾的是,目前的浏览器对3D渲染效果还不是非常理想,尤其是渲染速度,可能用chrome和safari ...

  4. android开发骰子动画,GitHub - jieyou/dice: 一个css3 3d动画效果的色子（或称骰子？）...

    dice -- 3d色子(或称骰子?) 一个css3 3d动画效果的色子 完全效果(完全流畅的3d动画.阴影.圆角):Chrome\Firefox\Safari\iOS Safari 6.0+\And ...

  5. 3D动画效果实现步骤

    3D动画效果实现步骤 3D呈现(transform-style) 3D元素构建是指某个图形是由多个元素构成的,可以给这些元素的父元素设置transform-style: preserve-3d来使其变 ...

  6. Android 动画介绍及自定义3D动画效果的基本使用

    导语 Android的动画框架包括帧动画.视图动画(又叫补间动画).属性动画.在Android3.0之前,视图动画一家独大,但随之后属性动画框架被推出.相比属性动画,视图动画一个非常大的缺陷就是不具备 ...

  7. 【web前端特效源码】使用HTML5+CSS3制作一个会促销广告滚动字幕3D动画效果~~适合初学者~超简单~ |前端开发|IT软件

    b站视频演示效果: [web前端特效源码]使用HTML5+CSS3制作一个会促销广告滚动字幕3D动画效果~~适合初学者~超简单~ |前端开发|IT软件 效果图: 完整代码: <!DOCTYPE ...

  8. 浅谈css3的3D动画效果并制作一个简单的旋转照片墙

    各位读者大家好,我是一只小菜鸟.目前正在学习web前端方面的相关知识.,这也是小菜鸟第一次写博客.写的有哪里不对的地方欢迎各位指正. 本篇文章内容就是利用简单的HTML布局再加上CSS3的3D转换和动 ...

  9. html5 css 3d动画效果代码,css3D+动画的例子（附完整代码）

    本篇文章给大家带来的内容是关于css3D+动画的例子(附完整代码),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 前言 最近玩了玩用css来构建3D效果,写了几个demo,所以博客总 ...

最新文章

  1. 不孕不育怎么办？AI帮你提高成功率
  2. C11标准委员会成员解读C语言新标准
  3. Git工作笔记001---Windows下安装Git Core以及TortoiseGit安装与配置
  4. 第二十：如何把Jenkins+Allure2生成的报告发送邮件（重点超详细）
  5. 剑指offer-21.栈的压入弹出序列
  6. 超时时间已到。 数据库连接超时
  7. mysql监控优化（二）主从复制
  8. 关于新建android项目时 appcompat_v7报错问题的一点总结
  9. Springboot的工作机制：4 再谈谈自动配置
  10. c语言关键字及其含义,C语言关键字解析
  11. 求助：ACM剑气算法
  12. LeetCode 1240. Tiling a Rectangle with the Fewest Squares
  13. vmdk to vhdx 虚拟磁盘格式转换qemu-img
  14. 手把手教你打造360手机Android应用商店高级开发实战视频教程
  15. 【日语】日语商务情景口语
  16. 文件夹的隐藏选项为灰色勾选，无法更改或删除
  17. FullCalendar 学习笔记——简单的节假日设置
  18. 一文详解单目VINS论文与代码解读目录
  19. 关于android 在黑屏情况下wifi下载速度慢的问题的解决。
  20. 使用计算机如何清零,怎样清除电脑所有数据_如何清空电脑所有数据

热门文章

  1. css规则定义的分类,.css规则定义
  2. Vue element-ui之神坑
  3. 04-mysql数据备份之mysqldump命令详解
  4. 问题 C: Fraction 分数类 I
  5. java怎么写合并列sql_SQL STUFF函数 拼接字符串 多列 合并成一列 转
  6. Sphnix + Markdown 记笔记之一目了然的搭建过程
  7. ATECLOUD智能云测试平台-测试测量/仪器程控/工业控制/上位机开发软件
  8. Docker基本使用教程
  9. Ardupilot移植经验分享(2)
  10. 解决md导入CSDN中图片大小过大 改变图片的大小