<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>3D</title> 
<style type="text/css">
*{margin:0;padding:#000;}
body{overflow:hidden;background:#000;}
#perspective{
perspective:1000px;/*景深*/
}
#wrap{
position:relative;
width:133px;
height:200px;
border:2px solid red;
margin:150px auto;
transform-style:preserve-3d;
transform:rotateX(-10deg) rotateY(0deg);
}
#wrap img{
position:absolute;
top:0;
transform:rotateX(0deg) rotateY(0deg);
-webkit-box-reflect:below 0 -webkit-linear-gradient(transparent,transparent 50%,rgba(255,255,255,.3));;
}
</style>

</head>
<body>
<div id="perspective" >
<div id="wrap" >
<img src="data:images/1.jpg" />
<img src="data:images/2.jpg" />
<img src="data:images/3.jpg" />
<img src="data:images/4.jpg" />
<img src="data:images/5.jpg" />
<img src="data:images/6.jpg" />
<img src="data:images/7.jpg" />
<img src="data:images/8.jpg" />
<img src="data:images/9.jpg" />
<img src="data:images/10.jpg" />
<img src="data:images/11.jpg" />
</div>
</div> 
<script type="text/javascript">
window.onload=function(){

var oImg=document.getElementsByTagName("img");//通过标签获取元素节点
var oWrap=document.getElementById("wrap");
var Deg = 360 / oImg.length;

Array.prototype.forEach.call(oImg,function(el,index){

el.style.transform="rotateY("+Deg*index+"deg) translateZ(350px)";
el.style.transition="transform 1s "+index*0.1+"s";

});
var nowX,nowY,lastX,lastY,minusX,minusY,roX=-10,roY=0,timer;
document.onmousedown=function(ev){
var ev=ev||window.event;//兼容ie9
lastX=ev.clientX; lastY=ev.clientY;

this.onmousemove=function(ev){
nowX=ev.clientX;nowY=ev.clientY;
minusX=nowX-lastX;
minusY=nowY-lastY;
roX-=minusY*0.1;
roY+=minusX*0.2;
oWrap.style.transform="rotateX("+roX+"deg) rotateY("+roY+"deg)"
lastX=nowX;lastY=nowY;
}

this.onmouseup=function(){
this.onmousemove=null;

timer=setInterval(function(){
minusX *=0.98;
minusY *=0.98;
roX-=minusY*0.1;
roY+=minusX*0.2;
oWrap.style.transform="rotateX("+roX+"deg) rotateY("+roY+"deg)";
if(Math.abs(minusX)<0.1&&Math.abs(minusY)<0.1)
{
clearInterval(timer);
}
},1000/60);

this.onmouseup=null;
}

}

}
</script>
</body>
</html>

原生js实现图片的3d效果的更多相关文章

  1. 原生js实现图片轮播效果

    思路:设置父容器(一定宽度,一定高度,相对定位,子容器超出部分进行隐藏),子容器图片并排(浮动,绝对定位,每次点击进行相应的左或右偏移量) 1.html: <!DOCTYPE html> ...

  2. js 实现图片瀑布流效果，可更改配置参数 带完整版解析代码[waterFall.js]

    前言:         本人纯小白一个,有很多地方理解的没有各位大牛那么透彻,如有错误,请各位大牛指出斧正!小弟感激不尽.         本篇文章为您分析一下原生JS实现图片瀑布流效果 页面需求 1 ...

  3. 原生js实现canvas气泡冒泡效果

    说明: 本文章主要分为ES5和ES6两个版本 ES5版本是早期版本,后面用ES6重写优化的,建议使用ES6版本. 1, 原生js实现canvas气泡冒泡效果的插件,api丰富,使用简单2, 只需引入J ...

  4. JS实现图片翻书效果示例代码

    js 图片翻书效果.  picture.html  <html xmlns="http://www.w3.org/1999/xhtml">  <head>  ...

  5. js实现图片自动切换效果。

    js实现图片自动切换效果,简单实用,原谅我只是一只小菜鸟还在学大神天天写博文装逼. <script language="javascript"> setInterval ...

  6. 图片设置3D效果

    /** * 图片绘制3d效果 * @param srcImage * @param radius * @param border * @param padding * @return * @throw ...

  7. JS实现图片翻书效果

    picture.html <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http- ...

  8. 原生JS—实现图片循环切换的两种方法

    今天我们主要讲讲如何使用原生JS实现图片的循环切换的方法.多余的话我们就不多说了,我们一个一个开始讲吧. 1  原生JS实现图片循环切换 -- 方法一 在上栗子之前我们先简单介绍一下所用的一些知识点. ...

  9. 原生JS—实现图片循环切换及监测鼠标滚动切换图片

    今天我们主要讲讲如何使用原生JS实现图片的循环切换的方法以及如何检测鼠标滚动循环切换图片.多余的话我们就不多说了,我们一个一个开始讲吧. 1  原生JS实现图片循环切换 -- 方法一 在上栗子之前我们 ...

随机推荐

  1. 010_Linux驱动之_DECLARE_WAIT_QUEUE_HEAD函数

    1. 功能:创建以个等待队列头 2. 函数原型 #define DECLARE_WAIT_QUEUE_HEAD (name)                            /     wait ...

  2. BZOJ 4025 二分图 LCT维护最大生成树

    怎么说呢,我也不知道该咋讲,你就手画一下然后 yy 一下就发现这么做是对的. 为什么我明明都想出来了,却还是讲不出来啊~ #include <cstdio> #include <ve ...

  3. js 跨域请求原理及常见解决方案

    一.同源策略: 说到跨域请求,首先得说说同源策略: 1995年,同源政策是由 Netscape 公司引入浏览器的.目前,所有浏览器都实行了这个政策. 同源策略是浏览器的一种安全策略,所谓同源是指,域名 ...

  4. Win内核原理与实现学习笔记3-windows系统结构

    1.概述 1.1windows采用了双模式(dual mode)结构来保护操作系统本身,以避免被应用程序的错误而波及.操作系统核心运行在内核模式(kernel mode)下,应用程序的代码运行在用户模 ...

  5. sick 激光

    sick10:TiM561-2050101https://www.sick.com/cn/zh/detection-and-ranging-solutions/2d-lidar-/tim5xx/tim ...

  6. Jenkins+Ant+Git+Jmeter接口自动化

    一.服务器分别安装JKD.Jenkins.Ant.Git.Jmeter 1.JKD安装参考:https://www.cnblogs.com/xiaoxitest/p/6168045.html 2.Je ...

  7. flask + nginx + uwsgi + ubuntu18.04部署python restful接口

    目录 参考链接 效果展示 一.准备工作 1.1 可运行的python demo: 1.2 更新系统环境 二.创建python虚拟环境 三.设置flask应用程序 四.配置uWSGI 五.设置系统启动 ...

  8. idea 2018注册码（激活码）

    最近做一个项目,用idea 社区版的   但是缺少了好多功能 无奈只能用专业版的,但是需要注册激活  下面是我的注册方法 1.打开了idea  会提示让激活  选择Licensse server 2. ...

  9. Golang 二维切片初始化

    package main import "fmt" func main() { // 方法0 row, column := 3, 4 var answer [][]int for ...

  10. 入门display:inline-block运用

    这是我第一篇博客,是我新的开始,我要用博客记录我的学习之旅,在这里我要感谢我的哥哥,他带我开阔了眼界,纠正了我的格局,给我带来了正能量.我是一个小白,学习的路还很长很长,学习了10天HTML与css, ...