版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/wbdsr234/article/details/68941949
3D翻转
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{margin:0;padding:0}
html,body{background: #333;}
#box{
width:133px;
height:200px;
position: relative;
margin:200px auto;
user-select: none;
-webkit-user-select: none;
transform-style: preserve-3d;
transform: perspective(800px) rotateX(-20deg);
}
#box img{
display: block;
width:133px;
height:200px;
position: absolute;
-webkit-box-reflect:below 10px -webkit-gradient(linear,0 0, 0 100%,from(rgba(0,0,0,0)), color-stop(.4, transparent), to(rgba(0,0,0,0.2)));
}
</style>
</head>
<body>
<div id="box">
<img src="images/11.jpg">
<img src="images/12.jpg">
<img src="images/13.jpg">
<img src="images/14.jpg">
<img src="images/15.jpg">
<img src="images/16.jpg">
<img src="images/17.jpg">
<img src="images/18.jpg">
<img src="images/19.jpg">
<img src="images/20.jpg">
</div>
<script>
var box = document.getElementById('box');
var length = document.getElementsByTagName('img').length;
var imgs = document.getElementsByTagName('img');
var r = 360/length;
var mX = null;
var mY = null;
var stepX = null;
var stepY = null;
for(var i = 0;i < length;i++){
var str = "rotateY("+r*i+"deg) translateZ(300px)";
cssTransform(imgs[i],str);
}
document.ondragstart = function(){
return false;
};
document.onmousedown = function(ev){
var mosX = ev.clientX;
var mosY = ev.clientY;
document.onmousemove = function(ev){
var mouseX = ev.clientX;
var mouseY = ev.clientY;
/*上下移动是Y,左右移动是X*/
mX -= mouseY - mosY;
mY += mouseX - mosX;
stepX = mX * 0.2;
stepY = mY * 0.2;
var str = "perspective(800px) rotateX("+stepX+"deg) rotateY("+stepY+"deg)";
cssTransform(box,str);
mosX = mouseX;
mosY = mouseY;
}
};
document.onmouseup = function(){
document.onmousemove = null;
};
function cssTransform(obj,str){
var arr = ['webkit','moz','ms','o',''];
for(var i = 0;i < arr.length;i++){
obj.style[arr[i] + 'Transform'] = str;
}
}
</script>
</body>
</html>