<!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. Nginx 反向代理(http转htpps，并支持80端口继续提交post请求)

    项目是一个web server + 多个client的形式,client由用户安装在自己的电脑上 由http升级为https后,我们通过在Nginx做了80端口重定向443的配置,使用户通过访问htt ...

  2. nginx故障分析与记录

    本文是对于自己遇到nginx故障的一些记录.便于以后解决问题. 时间:2018_05_11 场景一:某天很多客户在群里反应说访问网站不了,报504错误. 环境:首先说明一点的就是公司网站是美国,日本等 ...

  3. 解决angular-deckgrid高度不均衡和重加载的问题

    在项目中使用angular-deckgrid+ng-infinite-scroll实现瀑布流的无限加载.但是实际测试中发现deckgrid有2个比较严重影响体验的BUG: 每次添加新的card,整个d ...

  4. [转]jQuery ListBox Plugin(ListBox插件)

    本文转自:http://www.cnblogs.com/think8848/archive/2011/09/28/2193990.html 转载请注明作者(think8848)和出处(http://t ...

  5. UEditor图片焦点错位,火狐document.body.scrollTop不管用的问题

    转自 http://liyunpeng.iteye.com/blog/2068751 关于 document.body.scrollTop 在火狐浏览器中不管用的问题 看网上有人写通过判断docume ...

  6. [转] 如何应用设计模式设计你的足球引擎（一和二）----Design Football Game（Part I and II）

    原文地址: http://www.codeproject.com/KB/architecture/applyingpatterns.aspx 作者:An 'OOP' Madhusudanan 译者:赖 ...

  7. c#参数修饰符-ref

    ref 关键字通过引用传递参数. 方法定义和调用方法必须显式使用ref关键字: 调用方法时参数必须初始化: 参数中可以声明多个ref修饰的参数. 例: public void UseRef( ref ...

  8. iptables-linux(ls)-inode-block

    Part1:iptables 环境:centos6.7 目前我只配置了INPUT.OUTPUT和FORWORD都是ACCEPT的规则 由于想要先实现防火墙规则,所以前面的内容讲的是方法,后面是详解ip ...

  9. java核心技术-多线程基础

    进程.线程 ​ 进程(Process) 是程序的运行实例.例如,一个运行的 Eclipse 就是一个进程.进程是程序向操作系统申请资源(如内存空间和文件句柄)的基本单位.线程(Thread)是进程中可 ...

  10. 洛谷P2792 [JSOI2008]小店购物(最小树形图)

    题意 题目链接 Sol 一开始的思路:新建一个虚点向每个点连边,再加上题面中给出的边,边权均为大小*需要购买的数量 然后发现死活都过不去 看了题解才发现题目中有个细节--买了\(A\)就可以买\(B\ ...