首页 > 代码库 > 3D旋转相册（适合新手）
3D旋转相册（适合新手）
<!DOCTYPE HTML>
<html onselectstart="return false">
<head>
<meta charset="utf-8">
<title>3D拖拽相册</title>
<style>
html,body{
width: 100%;
height: 100%;
overflow: hidden;
cursor: url("img/sb.png"),auto;
}
*{
padding:0;
margin:0;
}
body{
background: #000;
}
#wrap{
width:120px;
height:180px;
margin:150px auto;
position: relative;
/*3D转换*/
transform-style: preserve-3d;
/*3D的一个观看视距*/
transform: perspective(800px);
}
#wrap img{
width:120px;
height:180px;
position: absolute;
border-radius: 3px;
box-shadow: 0 0 5px #fff;
}
</style>
</head>
<body>
<div id="wrap">
<img src="http://pic1.hebei.com.cn/0/12/76/34/12763409_670435.jpg">
<img src="http://img.ivsky.com/img/tupian/img/201010/08/dongji-023.jpg">
<img src="http://www.taopic.com/uploads/allimg/110912/6438-11091201495864.jpg">
<img src="http://www.bz55.com/uploads1/allimg/120312/1_120312100435_8.jpg">
<img src="http://t1.niutuku.com/960/10/10-192927.jpg">
<img src="http://img2.3lian.com/2014/f2/164/d/20.jpg">
<img src="http://www.taopic.com/uploads/allimg/110912/6438-11091201495864.jpg">
<img src="http://pic39.nipic.com/20140226/18071023_154707834000_2.jpg">
<img src="http://www.taopic.com/uploads/allimg/121218/234734-12121Q30S562.jpg">
<img src="http://img.ivsky.com/img/tupian/img/201010/12/daziran-015.jpg">
<img src="http://img.article.pchome.net/00/26/98/56/pic_lib/wm/zjjbz2_06.jpg">
</div>
</body>
</html>
<script>
var oWrap = document.getElementById("wrap");
//在window窗口加载外成功后触发
window.onload = function(){
var oImg = oWrap.getElementsByTagName("img");
//360处于所有的img 求出一个img所占的度数
var Deg = 360 / oImg.length;
//32.333
console.log(Deg)
for(var i = 0; i < oImg.length; i++){
//设置每个img的旋转角度 chuan si fuo mu
oImg[i].style.transform = ‘rotateY(‘+ Deg * i + ‘deg) translateZ(350px)‘;
//开始拖动时触发
oImg[i].ondragstart = function(){
return false;
}
}
var roX = 0, roY = 0;
/**********************内部样式*******************************/
document.onmousedown = function(event){
//获取鼠标点击时候的坐标
x_ = event.clientX;
y_ = event.clientY;
//鼠标在移动时
this.onmousemove = function(event){
//获取鼠标移动时候的坐标
x = event.clientX;
y = event.clientY;
//获取点击和移动时候的偏移量
xN = x - x_;
yN = y - y_;
//增加缓动的动作
roY += xN * 0.1 ;
roX -= yN * 0.1;
//设置3D 元素距视图的距离为800 旋转X轴 和Y周
//perspective 3D效果的一个观看视距
oWrap.style.transform = ‘perspective(800px) rotateX(‘+ roX+‘deg) rotateY(‘+ roY+‘deg)‘;
//就是获取当然动态点的坐标，为了下一次鼠标点击做参考
x_ = event.clientX;
y_ = event.clientY;
}
this.onmouseup = function(){
this.onmousemove = null;
}
}
}
</script>
3D旋转相册（适合新手）
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。