<!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. 五十三.Docker概述、部署Docker、Docker镜像、Docker基本命令

    1.安装Docker 准备两台虚拟机,IP为192.168.1.10和192.168.1.20 安装docker-engine 和 docker-engine-selinux 关闭防火墙   **** ...

  2. Emacs：十六进制模式下跳转到特定地址

    造冰箱的大熊猫@cnblogs 2019/9/18 Emacs提供的十六进制模式(M-x hexl-mode)以十六进制格式显示文件内容,对于分析图像等二进制数据文件非常方便.在此模式下,我们可以使用 ...

  3. Luogu [P3622] [APIO2007]动物园

    题目链接 比较费脑子的一道题 先说题目核心思想 : 状压dp 环的处理我们先不管. 我们设 dp[j][s] 表示 到达动物 j 且 [ j , j+5) 这五个动物状态为s时 最多能使多少小朋友开心 ...

  4. xpath简介备查

    xpath简介 xpath 使用路径表达式在xml和html中进行导航 xpath包含标准函数库 xpath是一个w3c的标准 xpath节点关系 父节点 子节点 同袍节点 先辈节点 后代节点 xpa ...

  5. 8月清北学堂培训 Day 7

    当天走得太兴奋了,忘记保存就关电脑了o(╥﹏╥)o,现在补上( p′︵‵.) 今天是杨思祺老师的讲授~ 练习题 首先求出最短路: 如果选择的边不是最短路上的边,那么毫无影响: 对于最短路径上的边,我们 ...

  6. elasticsearch head插件（5.0及以上版本）

    官方参考地址:https://github.com/mobz/elasticsearch-head5.0及以上版本安装参考地址:http://www.cnblogs.com/jstarseven/p/ ...

  7. 重读APUE(4)-fcntl和ioctl的区别

    fcntl(File Control)-文件控制 ioctl(In/Out Control)-I/O控制 1. fcntl作用于文件,提供对文件的基础控制:ioctl作用于文件和设备对象,一般用来向设 ...

  8. git提交异常 fatal: LF would be replaced by..

    git提交代码时,一直报出“fatal: LF would be replaced by CRLF in (文件名)”的异常,导致代码提交不到远程仓储.其实是,不同系统对换行符的解释不同导致的. 方法 ...

  9. web前端——Vue.js基础学习之class与样式绑定

    打着巩固 css 知识的旗号开始了对 vue 样式绑定的研究,相比前一篇的 demo,本次内容多了各种样式在里面,变得稍微花哨了些,话不多说,直接上代码吧: <html> <head ...

  10. Jmeter-app接口

    1.IOS登录接口涉及的三个接口: 2.三个接口传入的参,第三个是判断用户是否登录成功的 http://118.178.247.67:8449/service/userLogin/phoneQuick ...