<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name = "JiangLiang" Date = "2017/11/23">

    <title>回忆无痕</title>

</head>

    <style>

        *{

            margin:0;

            padding:0;

        }

        body{

            background-color: #000;

            overflow: hidden;

        }

        #show{

            perspective:1000px;/* 景深 */

        }

        #warp{

            position:relative;

            width:230px;

            height:330px;

            margin:250px auto;

            transform-style: preserve-3d;/* 3d效果 */

            transform: rotateX(-15deg);/* 按照X轴旋转 */

        }

        #warp img{

            position:absolute;

            top:0px;

            -webkit-box-reflect:below 5px -webkit-linear-gradient(top,rgba(0,0,0,0) 50%,rgba(0,0,0,0.8) 100%);

        }

        audio{

            display:none;

        }

    </style>

<body>

    <div id = "show">

        <div id = "warp">

            <img src="./images/jiangliang (1).jpg" alt="" width="100%" height="100%">

            <img src="./images/jiangliang (2).jpg" alt="" width="100%" height="100%">

            <img src="./images/jiangliang (3).jpg" alt="" width="100%" height="100%">

            <img src="./images/jiangliang (4).jpg" alt="" width="100%" height="100%">

            <img src="./images/jiangliang (5).jpg" alt="" width="100%" height="100%">

            <img src="./images/jiangliang (6).jpg" alt="" width="100%" height="100%">

            <img src="./images/jiangliang (7).jpg" alt="" width="100%" height="100%">

        </div>

    </div>

    <audio src="./mp3/Westlife - Beautiful In White.mp3" controls="controls" autoplay = "auto" loop = "loop"></audio>

</body>

<script>

    var oimg = document.getElementsByTagName("img");

    var nowX , nowY , lastX , lastY , minusX , minusY , roX = -5 , roY = 0 ;

    var oWarp = document.getElementById("warp");

    var timer = null;

(function(i){

    var Ilenth = oimg.length;

    var deg = 360/Ilenth;

    for(;i < Ilenth; i++){

        oimg[i].style.transform = "rotateY("+deg*i+"deg) translateZ(400px)";

    }

})(0);

document.onmousedown = function (e){/*鼠标按下时事件*/

    var e = e || window.event ;/*event对象*/

    lastX = e.clientX;

    lastY = e.clientY;

    this.onmousemove = function(e){/*鼠标移动时事件*/

        var e = e || window.event ;

        nowX = e.clientX;

        nowY = e.clientY;

        minusX = nowX - lastX;

        minusY = nowY - lastY;

        roY += minusX *0.2;

        roX += minusY *0.1;

        oWarp.style.transform = "rotateX("+roX+"deg) rotateY("+roY+"deg)";

        lastX = nowX;

        lastY = nowY;

        this.onmouseout = function(){/*鼠标离开时事件*/

            this.onmousemove  =  null;

            timer = setInterval(function(){

                minusX *=0.9;

                minusY *=0.9;

             roY += minusX *0.2;

            roX += minusY *0.1;

            oWarp.style.transform = "rotateX("+roX+"deg) rotateY("+roY+"deg)";

            if(Math.abs(minusX) < 0.1 || Math.abs(minusY) < 0.1){

                clearInterval(timer);/*停止当时定时器*/

            }

            }, 1000/60);

        }

    }

}

</script>

</html>

预览图：

3D旋转相册的实现的更多相关文章

  1. 3D旋转相册（适合新手）

    <!DOCTYPE HTML> <html onselectstart="return false"> <head> <meta char ...

  2. css3+jquery制作3d旋转相册

    首先来看一下今天的炫酷效果: 首先分析一下这张图片: 1.每张图片都有倒影 2.这11张图片呈圆形均匀排列 3.可旋转,上下移动(当然这是效果做出来以后,图片是分析不出来的) 那下面就开始吧. 一.准 ...

  3. css3制作3d旋转相册

    此处只是记录,解析可见原文:http://www.cnblogs.com/skyblue-li/p/6092799.html <!DOCTYPE html> <html xmlns= ...

  4. CSS3实现3D旋转相册

    静态效果图: 代码如下: <!doctype html><html lang="en"><head> <meta charset=&quo ...

  5. Flash相册-------3D旋转应用

    1.图层一,图片1,转换为元件 2.3D旋转工具,变形--->y->180

  6. 解惑：如何使用html+css+js实现旋转相册，立方体相册等动画效果

    解惑:如何使用html+css+js实现旋转相册,立方体相册等动画效果 一.前言 最初还是在抖音上看到可以使用简单地代码实现炫酷的网页效果的,但是想要找到可以运行的代码还是比较困难的,最近突然想起就在 ...

  7. 【CSS3进阶】酷炫的3D旋转透视

    之前学习 react+webpack ,偶然路过 webpack 官网 ,看到顶部的 LOGO ,就很感兴趣. 最近觉得自己 CSS3 过于薄弱,想着深入学习一番,遂以这个 LOGO 为切入口,好好研 ...

  8. 3D旋转菜单

    今天来个3D旋转菜单,是纯css3实现的,主要用到transform,transition,backface-visibility. 主要是transform这个变换,它是今天猪脚. transfor ...

  9. 低调奢华 CSS3 transform-style 3D旋转

    点击这里查看效果:http://keleyi.com/a/bjad/s89uo4t1.htm 效果图: CSS3 transform-style 属性 以下是代码: <!DOCTYPE html ...

随机推荐

  1. Spark 概念学习系列之Spark Core（十五）

    不多说,直接上干货! 最关键的是转换算子Transformations和缓存算子Actions. 主要是对RDD进行操作. RDD Objects  ->  Scheduler(DAGSched ...

  2. redis集群的搭建详细教程

    1 Redis-cluster架构图             redis-cluster投票:容错  (至少要三个才可以,才能超过半数) 架构细节: (1)所有的redis节点彼此互联(PING-PO ...

  3. Nginx教程(6) 动静分离架构

    一.原理 Nginx 动静分离简单来说就是把动态跟静态请求分开,不能理解成只是单纯的把动态页面和静态页面物理分离.严格意义上说应该是动态请求跟静态请求分开,可以理解成使用Nginx 处理静态页面,To ...

  4. 深入js之基本语法

    周末正好有空就研究了下汤姆大叔的js系列博客,虽然只是学到点皮毛,依然获益匪浅.不得不说大牛的境界岂是吾等小辈可理解. 变量: js有隐含的全局概念,意味着不声明的所有变量都是全局对象的属性. fun ...

  5. PHP项目学习2

    通过<PHP项目学习1>基本上可以了解项目的大致结构.内容,现在直接从代码入手,开始coding吧. 现在部署环境中建立一个myonline的文件夹,便于放置我们的项目

  6. MySQL---7、常用操作

    1.表列的添加.修改和删除 2.视图 3.字符集和校对集 4.触发器相关知识

  7. C#三大特性之 封装、继承、多态

    一.封装: 封装是实现面向对象程序设计的第一步,封装就是将数据或函数等集合在一个个的单元中(我们称之为类).被封装的对象通常被称为抽象数据类型.  封装的意义: 封装的意义在于保护或者防止代码(数据) ...

  8. JS实现一位数显示为两位

    使用js脚本实现页面一位数字显示为两位,不足两位前面加“0”. function fix(num, length) { return ('' + num).length < length ? ( ...

  9. 撩课-Web大前端每天5道面试题-Day4

    1. 如何实现瀑布流? 瀑布流布局的原理: ) 瀑布流布局要求要进行布置的元素等宽, 然后计算元素的宽度, 与浏览器宽度之比,得到需要布置的列数; ) 创建一个数组,长度为列数, 里面的值为已布置元素 ...

  10. DOM基础操作实战代码

    对于已经讲解给大家的DOM实战,我今天给大家几个实战代码,可以让大家加深对此的理解! 1.用DOM动态生成这样一个结构: <div class=”example”> <p class ...