<!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. Modular Rails: The complete Guide to Modular Rails Applications 笔记

    fix SamuraiCRM/engines/core/test/dummy/config/routes 修改如下 Rails.application.routes.draw do mount Sam ...

  2. VirtualBox虚拟机克隆方法

    1.定位到Vritualbox的安装目录,不能用全路径的方式直接执行该命令行 2.执行Vboxmanage.exe clonevdi "d:\linux\source.vdi" & ...

  3. 虹软人脸识别在 linux中so文件加载不到的问题

    其实是可以加载到的,不过是so文件放的位置不一对,最简单的方式是放在 /usr/lib64 目录下,也可自己设置. so文件加载不到会报这个错误:    .lang.UnsatisfiedLinkEr ...

  4. Go RabbitMQ（四）消息路由

    RabbitMQ_Routing 本节内容我们将对发布订阅增加一个特性:订阅子集.比如我们将一些危险的错误消息保存进硬盘中,同时在控制台仍然能够读取所有的消息 Bingings 上一节内容我们将队列跟 ...

  5. Elasticsearch集群和索引常用命令

    https://www.cnblogs.com/pilihaotian/p/5846173.html REST API用途 ES提供了很多全面的API,大致可以分成如下几种: 1 检查集群.节点.索引 ...

  6. 724_Find-Pivot-Index

    目录 724_Find-Pivot-Index Description Solution Java solution Python solution 724_Find-Pivot-Index Desc ...

  7. 每天一道leetcode141-环形链表

    考试结束,班级平均分只拿到了年级第二,班主任于是问道:大家都知道世界第一高峰珠穆朗玛峰,有人知道世界第二高峰是什么吗?正当班主任要继续发话,只听到角落默默想起来一个声音:”乔戈里峰” 前言 2018. ...

  8. [Linux]C语言Linux系统编程创建进程

    1.进程ID 每一个进程都由一个唯一的标识符表示,即进程ID,简称pid.系统保证在某时刻每个pid都是唯一的. 1.1分配进程ID 缺省情况下,内核将进程ID的最大值限制为32768,可以在此处设置 ...

  9. spring 事务管理机制

    1. spring 事务管理抽象 spring 的事务策略机制的核心就是 org.springframework.transaction.PlatformTransactionManager 接口. ...

  10. Spring Data JPA —— 快速入门

    一.概述 JPA : Java Persistence API, Java持久层API,是JDK 5.0注解或XML描述对象-关系表的映射关系,并将运行期的实体对象持久化到数据库中. Spring D ...