css仿图片3D效果

2020-12-01 10:00

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">  
<html>  
<head>  
<title>Wanna tell her - interactive DHTML </title>  
<meta http-equiv="imagetoolbar" content="no">  
<style type="text/css">  
html {  
overflow: hidden;  
}  
body {  
position: absolute;  
margin: 0px;  
padding: 0px;  
background: #fff;  
width: 100%;  
height: 100%;  
}  
#screen {  
position: absolute;  
left: 10%;  
top: 10%;  
width: 80%;  
height: 80%;  
background: #fff;  
}  
#screen img {  
position: absolute;  
cursor: pointer;  
width: 0px;  
height: 0px;  
-ms-interpolation-mode:nearest-neighbor;  
}  
#bankImages {  
visibility: hidden;  
}  
#FPS {  
position: absolute;  
right: 5px;  
bottom: 5px;  
font-size: 10px;  
color: #666;  
font-family: verdana;  
}  

</style>  

<script type="text/javascript">  
/* ==== Easing function ==== */  
var Library = {};  
Library.ease = function () {  
this.target = 0;  
this.position = 0;  
this.move = function (target, speed) {  
this.position += (target - this.position) * speed;  
}  
}  

var tv = {  
/* ==== variables ==== */  
O : [],  
fps : 0,  
screen : {},  
angle : {  
x : new Library.ease(),  
y : new Library.ease()  
},  
camera : {  
x : new Library.ease(),  
y : new Library.ease()  
},  
create3DHTML : function (i, x, y, z, sw, sh) {  
/* ==== create HTML image element ==== */  
var o = document.createElement('img');  
o.src = i.src;  
tv.screen.obj.appendChild(o);  
/* ==== 3D coordinates ==== */  
o.point3D = {  
x : x,  
y : y,  
z : new Library.ease(),  
sw : sw,  
sh : sh,  
w : i.width,  
h : i.height  
};  
o.point3D.z.target = z;  
/* ==== push object ==== */  
o.point2D = {};  
tv.O.push(o);  

/* ==== on mouse over event ==== */  
o.onmouseover = function () {  
if (this != tv.o) {  
this.point3D.z.target = tv.mouseZ;  
tv.camera.x.target = this.point3D.x;  
tv.camera.y.target = this.point3D.y;  
if (tv.o) tv.o.point3D.z.target = 0;  
tv.o = this;  
}  
return false;  
}  

/* ==== on mousedown event ==== */  
o.onmousedown = function () {  
if (this == tv.o) {  
if (this.point3D.z.target == tv.mouseZ) this.point3D.z.target = 0;  
else {  
tv.o = false;  
this.onmouseover();  
}  
}  
}  

/* ==== main 3D function ==== */  
o.animate = function () {  
/* ==== 3D coordinates ==== */  
var x = this.point3D.x - tv.camera.x.position;  
var y = this.point3D.y - tv.camera.y.position;  
this.point3D.z.move(this.point3D.z.target, this.point3D.z.target ? .15 : .08);  
/* ==== rotations ==== */  
var xy = tv.angle.cx * y - tv.angle.sx * this.point3D.z.position;  
var xz = tv.angle.sx * y + tv.angle.cx * this.point3D.z.position;  
var yz = tv.angle.cy * xz - tv.angle.sy * x;  
var yx = tv.angle.sy * xz + tv.angle.cy * x;  
/* ==== 2D transform ==== */  
var scale = tv.camera.focalLength / (tv.camera.focalLength + yz);  
x = yx * scale;  
y = xy * scale;  
var w = Math.round(Math.max(0, this.point3D.w * scale * this.point3D.sw));  
var h = Math.round(Math.max(0, this.point3D.h * scale * this.point3D.sh));  
/* ==== HTML rendering ==== */  
var o = this.style;  
o.left = Math.round(x + tv.screen.w - w * .5) + 'px';  
o.top = Math.round(y + tv.screen.h - h * .5) + 'px';  
o.width = w + 'px';  
o.height = h + 'px';  
o.zIndex = 10000 + Math.round(scale * 1000);  
}  
},  

/* ==== init script ==== */  
init : function (structure, FL, mouseZ, rx, ry) {  
this.screen.obj = document.getElementById('screen');  
this.screen.obj.onselectstart = function () { return false; }  
this.screen.obj.ondrag = function () { return false; }  
this.mouseZ = mouseZ;  
this.camera.focalLength = FL;  
this.angle.rx = rx;  
this.angle.ry = ry;  
/* ==== create objects ==== */  
var i = 0, o;  
while( o = structure[i++] )  
this.create3DHTML(o.img, o.x, o.y, o.z, o.sw, o.sh);  
/* ==== start script ==== */  
this.resize();  
mouse.y = this.screen.y + this.screen.h;  
mouse.x = this.screen.x + this.screen.w;  
/* ==== loop ==== */  
setInterval(tv.run, 16);  
setInterval(tv.dFPS, 1000);  
},  

/* ==== resize window ==== */  
resize : function () {  
var o = tv.screen.obj;  
if (o) {  
tv.screen.w = o.offsetWidth / 2;  
tv.screen.h = o.offsetHeight / 2;  
for (tv.screen.x = 0, tv.screen.y = 0; o != null; o = o.offsetParent) {  
tv.screen.x += o.offsetLeft;  
tv.screen.y += o.offsetTop;  
}  
}  
},  

/* ==== main loop ==== */  
run : function () {  
tv.fps++;  
/* ==== motion ease ==== */  
tv.angle.x.move(-(mouse.y - tv.screen.h - tv.screen.y) * tv.angle.rx, .1);  
tv.angle.y.move( (mouse.x - tv.screen.w - tv.screen.x) * tv.angle.ry, .1);  
tv.camera.x.move(tv.camera.x.target, .025);  
tv.camera.y.move(tv.camera.y.target, .025);  
/* ==== angles sin and cos ==== */  
tv.angle.cx = Math.cos(tv.angle.x.position);  
tv.angle.sx = Math.sin(tv.angle.x.position);  
tv.angle.cy = Math.cos(tv.angle.y.position);  
tv.angle.sy = Math.sin(tv.angle.y.position);  
/* ==== loop through images ==== */  
var i = 0, o;  
while( o = tv.O[i++] ) o.animate();  
},  

/* ==== trace frames per seconds ==== */  
dFPS : function () {  
document.getElementById('FPS').innerHTML = tv.fps + ' FPS';  
tv.fps = 0;  
}  
}  

/* ==== global mouse position ==== */  
var mouse = {  
x : 0,  
y : 0  
}  
document.onmousemove = function(e) {  
if (window.event) e = window.event;  
mouse.x = e.clientX;  
mouse.y = e.clientY;  
return false;  
}  

/* ==== starting script ==== */  
onload = function() {  
onresize = tv.resize;  
/* ==== build grid ==== */  
var img = document.getElementById('bankImages').getElementsByTagName('img');  
var structure = [];  
for (var i = -300; i <= 300; i += 120)  
for (var j = -300; j <= 300; j += 120)  
structure.push({ img:img[0], x:i, y:j, z:0, sw:.5, sh:.5 });  
/* ==== let's go ==== */  
tv.init(structure, 350, -200, .005, .0025);  
}  

</script>  
</head>  

<body>  

<div id="screen"> </div>  

<div id="bankImages">  
<img alt="112233" src="1.jpg">  
</div>  
<div id="FPS"> </div>  

</body>  
</html>

3514 次浏览 1 条评论 收藏

说说我的看法

登录后可以发表评论 登录
1个评论
-- 2020-12-01 10:00
{:soso_e122:}怎么米图片啊??
回复
作者信息

20
贴子
0
粉丝
热门贴子

免费试用


咨询热线


在线咨询