简单html5 与 css3 配合js代码的3D照片效果
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>3D 相册</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<div class="stage">
<img src="img/1.jpeg" alt="">
<img src="img/2.jpeg" alt="">
<img src="img/3.jpg" alt="">
<img src="img/4.jpeg" alt="">
<img src="img/5.jpg" alt="">
<img src="img/6.jpg" alt="">
<img src="img/7.jpg" alt="">
<img src="img/8.jpg" alt="">
</div>
</body>
<script src = "js/script.js"></script>
</html>
style.css
@charset "UTF-8";
*{
margin: 0;
padding: 0;
}
body{
background-color: #000000;
overflow: hidden;
}
.stage{
width: 133px;
height: 200px;
margin: 278px auto;
position: relative;
transform-style: preserve-3d;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
transform-style: preserve-3d;/*使被转换的子元素保留其 3D 转换:*/
-webkit-transform: perspective(800px) rotateX(-30deg);
-moz-transform: perspective(800px) rotateX(-30deg);
-ms-transform: perspective(800px) rotateX(-30deg);
-o-transform: perspective(800px) rotateX(-30deg);
transform: perspective(800px) rotateX(-30deg);/*逆时针旋转30度,透视800px*/
}
.stage img{
width: 133px;
height: 200px;
position: absolute;
-webkit-box-reflect: below 10px -webkit-linear-gradient(top,rgba(0,0,0,0)50%,rgba(0,0,0,0.7)100%);/*倒影效果*/
/*渐变*/
}
script.js
window.onload = function(){
var stage = document.querySelector(".stage");
var images = document.querySelectorAll("img");
var imgLen = images.length;
var degree = 360/imgLen;
var stepX = null;
var stepY = null;
var degX = null;
var degY = null;
//照片的布局
for(var i=0;i<imgLen;i++){
var str = "rotateY("+degree*i+"deg) translateZ(300px)";//每个照片的间隔
css3Transform(images[i],str);
}
//取消默认拖拽
document.ondragstart = function(){
return false;
};
//鼠标移动
document.onmousedown = function(e){
//兼容性问题
var eve = e||event;
var mouX = eve.clientX;//clientX 事件属性返回当事件被触发时鼠标指针向对于浏览器页面(或客户区)的水平坐标。
var mouY = eve.clientY;//clientY 返回的是竖直坐标
document.onmousemove = function(e){
var evel = e||event;
var mouseX = evel.clientX;
var mouseY = evel.clientY;
stepX = mouseX - mouX;
stepY = mouseY - mouY;
degX -= stepY*0.2;
degY += stepX*0.1;
var str = "perspective(800px) rotateX(-30deg) rotateX("+degX+"deg) rotateY("+degY+"deg)";
css3Transform(stage,str);
mouX = mouseX;
mouY = mouseY;
}
};
document.onmouseup = function(){
document.onmousemove = function(){
return false;
}
};
//兼容函数
function css3Transform(element,value){
var arr = ["o","ms","Moz","webkit",""];
var length = arr.length;
for(var i=0;i<length;i++){
element.style[arr[i] + "Transform"] = value;
}
}
};
说明:
1.此代码最最核心的我认为是css3部分与js部分。
2.其中最核心的地方在于js部分的兼容函数,这也是我第一次见到,其余的部分就是css与js的结合。
3.关于鼠标拖拽的问题:一开始我还以为特别的高大尚,后来懂了以后才知道,异常的简单,其实就是先计算鼠标点击时候的坐标,然后在计算鼠标移动的坐标,最后舞台的移动实际上就是鼠标移动的坐标减去鼠标点击的坐标。
然后就是旋转的角度问题了,这也是最重要的一个难点
就是舞台水平旋转其实是鼠标上下移动所导致的
舞台竖直旋转其实就是鼠标左右移动所导致的
其次就是注意取值的顺时针逆时针问题了
{{ cmt.username }}
{{ cmt.content }}
{{ cmt.commentDate | formatDate('YYYY.MM.DD hh:mm') }}