3D相册旋转

来源：互联网发布：见见软件靠谱吗编辑：程序博客网时间：2024/04/30 01:26
*{padding: 0;margin: 0;}body{background-color: #000;-webkit-user-select: none;overflow: hidden;}.stage{width: 133px;height: 200px;position: relative;/*border: 1px solid #f66;*/margin: 200px auto;-webkit-transform-style:preserve-3d ;-moz-transform-style:preserve-3d ;-ms-transform-style: preserve-3d;transform-style:preserve-3d;transform: perspective(800px) rotateX(-15deg);}.stage img{position: absolute;display: block;/*投影*/-webkit-box-reflect:below 10px;/*线性渐变*/ -webkit-linear-gradient(top,rgba(0,0,0,0) 50%,rgba(0,0,0,0.7) 100%);-webkit-border-radius: 20px;-webkit-box-shadow: 0 0 5px #fff;}/*.stage img:nth-child(1){transform: rotateY(0deg) translateZ(300px);}.stage img:nth-child(2){transform: rotateY(36deg) translateZ(300px);}.stage img:nth-child(3){transform: rotateY(72deg) translateZ(300px);}.stage img:nth-child(4){transform: rotateY(108deg) translateZ(300px);}.stage img:nth-child(5){transform: rotateY(144deg) translateZ(300px);}.stage img:nth-child(6){transform: rotateY(180deg) translateZ(300px);}.stage img:nth-child(7){transform: rotateY(216deg) translateZ(300px);}.stage img:nth-child(8){transform: rotateY(252deg) translateZ(300px);}.stage img:nth-child(9){transform: rotateY(288deg) translateZ(300px);}.stage img:nth-child(10){transform: rotateY(324deg) translateZ(300px);}*/<pre name="code" class="html"><!DOCTYPE html><html><head><meta charset="utf-8" /><title></title><link rel="stylesheet" type="text/css" href="css/main.css"/></head><body><div class="stage" id="stage"><img src="img/1.jpg"/><img src="img/2.jpg"/><img src="img/3.jpg"/><img src="img/4.jpg"/><img src="img/5.jpg"/><img src="img/6.jpg"/><img src="img/7.jpg"/><img src="img/8.jpg"/><img src="img/9.jpg"/><img src="img/10.jpg"/><img src="img/11.jpg"/></div></body><script type="text/javascript">var stage = document.getElementById("stage");//获取到所有图片var imgs = stage.getElementsByTagName("img");//获取图片的长度var len = imgs.length;//每一张图片的旋转角度var rot = 360/len;//使用循环实现效果var i=0;for(i=0;i<len;i++){imgs[i].style.transform = "rotateY("+(rot*i)+"deg) translateZ(300px)"}//x和y方向上运动的差值var stepX = 0;var stepY = 0;//旋转角度var rotX = 0;var rotY = 0;//强这个页面中的拖拽效果禁用掉document.ondragstart = function(){return false;}document.onmousedown = function(e){//获取点击点的坐标var mouX = e.clientX;var mouY = e.clientY;//鼠标点击下去并且拖动document.onmousemove = function(e){//拖动过程产生的一系列点的坐标var newMouX = e.clientX;var newmouY = e.clientY;stepX = newMouX - mouX;stepY = newmouY - mouY;//模拟旋转的角度，就是将差值乘以一个小赔率的值rotX += stepY * 0.2;rotY += stepX * 0.1;//旋转,先将预定义的写进来，在写新的stage.style.webkitTransform = "perspective(800px) rotateX(-15deg) rotateX("+rotX+"deg) rotateY("+rotY+"deg)";//为了连续性，我们将这组值作为我们的初始点mouX = newMouX;mouY = newmouY;}}document.onmouseup = function(){document.onmousemove=null;}//function cssTransform(ele,str){//var style["webkit","Moz","ms","o".""];//for(var =0;i<5;i++){//ele.style[styles[i]+"Transform"]=str;////}//}</script></html>
0 0