3D照片旋转

Html

Css

body {
	background:#000;
	perspective:2000px;
}
#box {
	width:220px;
	height:300px;
	margin:200px auto;
	position:relative;
	transform-style:preserve-3d;
}
#box img {
	width:100%;
	height:100%;
	position:absolute;
	-webkit-box-reflect:below 10px;
}

window.onload = function() {
     var oWrap = document.getElementById('box');
     var oImg = box.getElementsByTagName('img');
     var oImgLength = oImg.length;
     var Deg = 360 / oImgLength;
     var nowX, nowY, lastX, lastY, disx = 0,
         disy = 0;
     var roY = 0,
         roX = 0;
     var timer;

for (var i = 0; i < oImgLength; i++) {
         oImg[i].style.transform = 'rotateY(' + i * Deg + 'deg) translateZ(400px)';
         oImg[i].style.transition = 'transform 1s ' + (oImgLength - 1 - i) * 0.1 + 's';

}

mTop();

window.onresize = mTop;

function mTop() {
         var wH = document.documentElement.clientHeight;
         box.style.marginTop = wH / 2 - 180 + 'px';
     }

// 拖拽：三个事件-按下 移动 抬起
     //按下
     document.onmousedown = function(ev) {
         ev = ev || window.event;

//鼠标按下的时候，给前一点坐标赋值，为了避免第一次相减的时候出错
         lastX = ev.clientX;
         lastY = ev.clientY;

//移动
         this.onmousemove = function(ev) {
             ev = ev || window.event;

//                      clearInterval( timer );

nowX = ev.clientX; // clientX 鼠标距离页面左边的距离
             nowY = ev.clientY; // clientY ………………………………顶部………………

//当前坐标和前一点坐标差值
             disx = nowX - lastX;
             disy = nowY - lastY;

//更新wrap的旋转角度，拖拽越快-> minus变化大 -> roY变化大 -> 旋转快
             roY += disx * 0.2; // roY = roY + disx*0.2;
             roX -= disy * 0.2;

oWrap.style.transform = 'rotateX(' + roX + 'deg) rotateY(' + roY + 'deg)';

//                      //生成div，让div跟着鼠标动
             //                      var oDiv = document.createElement('div');
             //                      oDiv.style.cssText = 'width:5px;height:5px;background:red;position:fixed;left:'+nowX+'px;top:'+nowY+'px';
             //                      this.body.appendChild(oDiv);

//前一点的坐标
             lastX = nowX;
             lastY = nowY;
         }
         //抬起
         this.onmouseup = function() {
             this.onmousemove = null;
             timer = setInterval(function() {
                 disx *= 0.98;
                 disy *= 0.98;
                 roY += disx * 0.2; // roY = roY + disx*0.2;
                 roX -= disy * 0.2;
                 oWrap.style.transform = 'rotateX(' + roX + 'deg) rotateY(' + roY + 'deg)';
             }, 20);
         }
         return false;
     }
 }

↑上面代码改变，会自动显示代码结果 jQuery调用版本：1.11.3

立即下载

3D照片旋转



代码描述：3D效果的图片展示

纯JS手写，含部分备注

0

最新

发表评论全部评论

暂时没有评论！

登录后才可以评论

30秒后在评论吧!

PROMULGATOR

ly..ly

相关代码

3D照片旋转

最新