<!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. python 四种单例模式

    1 使用__new__方法 Python class Singleton(object): def __new__(cls, *args, **kw): if not hasattr(cls, '_i ...

  2. 陈新宇：CKafka在人脸识别PAAS中的应用

    欢迎大家前往腾讯云+社区,获取更多腾讯海量技术实践干货哦~ 本文首发在云+社区,未经许可,不得转载. 我叫陈新宇,在格灵深瞳负责数据流的研发,首先特别感谢如今老师,他们把Kafka一个优秀的消息中间件 ...

  3. ASP.NET Core 集成 WebSocket

    1. 环境 AspNetCore Web 2.0 (MVC) Windows 10 IIS 10 Express/IIS VS 2017 2.如何配置 在已有的或者新创建的 AspNet Core M ...

  4. Entity FreamWork框架

    实体框架 (Entity Framework) 1.是微软以ADO.Net为基础所发展出来的对象关系对应(O/R Mapping)解决方案. 2.实体框架Entity Framework是ADO.Ne ...

  5. 【转载】SQL Server 2012将数据导出为脚本详细图解

    前记: 从SQL SERVER 2008开始,我们就可以很方便的导出数据脚本,而无需再借助存储过程,但是SQL Server 2012和SQL Server 2008的导出脚本的过程还有一点细微的差别 ...

  6. FileSystemWatcher 监视指定目录中的变更

    .Net框架类库中的FileSystemWatcher如它的名称一样是一个用于监视文件系统变化的一个控件.使用 FileSystemWatcher 监视指定目录中的更改.可监视指定目录中的文件或子目录 ...

  7. Spring中的Bean配置方式

    1.IOC和DI概述 IOC(Inversion of Control):其思想是反转资源获取的方向. 传统的资源查找方式要求组件向容器发起请求查找资源. 作为回应, 容器适时的返回资源. 而应用了 ...

  8. groovy函数、字符串、循环

    三重单引号字符串 '''a triple single quoted string''' 三重单引号字符串是普通的java.lang.String 三重单引号字符串是多行的.您可以跨越行边界跨越字符串 ...

  9. MongoDB客户端及监控工具

    现在许多应用都使用MongoDB存储大量的业务数据,MongoDB基于文档式的存储,在大数据行业的应用还是很普遍的.MongoDB的客户端工具也很多,基于web的却不多,国产的就更少了,下面这款国产的 ...

  10. 【转】Eclipse，MyEclipse快捷键及字体设置

    1.如何调节Eclipse下console输出字体的大小?         打开window - preferences-- general - appearance - colors and fon ...