<!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. Editplus下载、安装并最佳配色方案（强烈推荐）

    不多说,直接上干货! Editplus下载 第一步:进入官网 https://www.editplus.com/ 第二步:下载 https://www.editplus.com/download.ht ...

  2. Table '.\gts\eventdata#P#p0' is marked as crashed and last (automatic?) repair failed

    修复数据表操 MYSQL数据表出现问题,提示:Error: Table './db_name/table_name' is marked as crashed and last (automatic? ...

  3. 【Qt开发】StyleSheet使用总结

    概述 转眼七年过去了,我是一个彻底拥抱过MFC的人,记得老大的一个需求要把按钮做成圆角,并添加背景颜色,做前端html的可能认为很简单,然而放到MFC上那可真的是很...很麻烦的,自定义类继承Butt ...

  4. Debugging Ruby in VS Code

    原文  https://dev.to/dnamsons/ruby-debugging-in-vscode-3bkj https://github.com/Microsoft/vscode-recipe ...

  5. hadoop 分布式安装

    一.虚拟机安装centos7需要显示IPv4地址时设置 修改ip addr 中显示ipv4 修改 ONBOOT=no 为 ONBOOT=yes, 同时需要添加HWADDR=00:0c:29:c8:b6 ...

  6. 最新 IntelliJ Idea 2017 激活方法（转）

    转载地址:http://www.cnblogs.com/suiyueqiannian/p/6754091.html 1. 到网站 http://idea.lanyus.com/ 获取注册码. 2.填入 ...

  7. spring之validation校验

    对于任何一个应用而言在客户端做的数据有效性验证都不是安全有效的,这时候就要求我们在开发的时候在服务端也对数据的有效性进行验证.SpringMVC自身对数据在服务端的校验有一个比较好的支持,它能将我们提 ...

  8. C#中的分部类和分部方法:partial

    这篇文章主要介绍了C#中的分部类和分部方法,讲解了类的拆分和方法的定义的拆分,需要的朋友可以参考下可以将类或结构.接口或方法的定义拆分到两个或多个源文件中.每个源文件包含类型或方法定义的一部分,编译应 ...

  9. firefox并不支持selectSingleNode和selectNodes的解决方法

    转自:http://qsrock.iteye.com/blog/209585 function test(){ var perid = document.thisForm.PerID.value; v ...

  10. CodeForces 614A（水题）

    这道题有个需要注意的地方,就是范围大小 2^16 = 65535,2^32 = 65535(10^4),2^16 = 4294967295(10^9),2^64=9223372036854775807 ...