<!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. springboot2.0最精简的配置yml

    https://blog.csdn.net/yu_hongrun/article/details/81708762

  2. Java中常见的集合类比较

    Collection 是对象集合, Collection 有两个子接口 List 和 Set,List 可以通过下标 (1,2..) 来取得值,值可以重复,而 Set 只能通过游标来取值,并且值是不能 ...

  3. strom部署问题

    1.storm 引用的 kafka和线上的kafka版本不一致 2.bolt的prepare初始化elasticsearch连接慢,导致第一次处理数据是总是有问题storm调用prepare方法是异步 ...

  4. CISCO实验记录九：NAT地址转换

    1.静态NAT地址转换 #ip nat inside source static 192.168.12.1 192.168.23.4 //将12.1转为23.4 必须精确到主机IP 而不能是某个网段 ...

  5. Qt configure 参数

    在编译QT前,可加各种参数来定制自己想要的QT库.这对需要裁减QT库的朋友来说非常重要.对于如何编译QT,可以参考:http://hi.baidu.com/agassi%5Fp/blog/item/4 ...

  6. CentOS7重启后resolv.conf被重置的解决方案

    近期在修改一台CentOS7服务器的dns时发现只要重启服务器DNS就会被强制还原,解决方案如下: 1.首先在网卡设置中修改NM_CONTROLLED的值: 修改文件/etc/sysconfig/ne ...

  7. 一个很好的开源视频播放器GiraffePlayer2（支持rtmp,rtsp,http,https）

    一个很好的开源视频播放器GiraffePlayer2(支持rtmp,rtsp,http,https) https://github.com/tcking/GiraffePlayer2 GiraffeP ...

  8. Android 显示系统：SurfaceFlinger详解

    一.Android系统启动 Android设备从按下开机键到桌面显示画面,大致过程如下图流程: 开机显示桌面.从桌面点击 App 图标到 Activity显示在屏幕上的过程又是怎样的呢?下面介绍And ...

  9. ROS 常用命令

    1.查看网卡接口: /interface  print 2.给网口添加IP地址: /ip address add address=192.168.1.254/24 interface=ether1 3 ...

  10. 012-Spring Boot web【一】web项目搭建、请求参数、RestController、使用jsp、freemarker，web容器tomcat和jetty

    一.项目搭建 同:http://www.cnblogs.com/bjlhx/p/8324971.html 1)新建maven项目→使用默认配置即可 定义好项目名称等 2)修改jdk版本 <pro ...