3D旋轉(zhuǎn)的立方體特效代碼

2009-11-26 圖片特效 ℃

<head>
<style>
.point{ position: absolute; width: 10; height: 10;background-color: #AAAAAA;overflow: hidden}
</style>
<script>
speed=4;
points=new Array();
angle=speed;
rotXok=true;
rotYok=true;
rotZok=false;
function Obj(div){return this;}
objpro=Obj.prototype;
objpro.moveTo=function(x,y,z){this.x=(x); this.y=(y); this.z=z; }
points=new Array();
function movemat(){
/*
2 - 1      1=1,2     2,3,7,6
/   /       2=3,4     1,5,8,4
3 - 4        3=5,6
4=7,8
6 - 5      5=9,10
/   /       6=11,12
7 - 8        7=13,14
8=15,16
*/
pt1=Math.round(points[1].x); pt2=Math.floor(points[1].y);
pt3=Math.floor(points[2].x); pt4=Math.floor(points[2].y);
pt5=Math.floor(points[3].x); pt6=Math.floor(points[3].y);
pt7=Math.floor(points[4].x); pt8=Math.floor(points[4].y);
pt9=Math.floor(points[5].x); pt10=Math.floor(points[5].y);
pt11=Math.floor(points[6].x); pt12=Math.floor(points[6].y);
pt13=Math.floor(points[7].x); pt14=Math.floor(points[7].y);
pt15=Math.floor(points[8].x); pt16=Math.floor(points[8].y);
sq1="m "+pt1+","+pt2+" l "+pt3+","+pt4+" "+pt5+", "+pt6+" "+pt7+", "+pt8+" x e";
sq2="m "+pt9+","+pt10+" l "+pt11+","+pt12+" "+pt13+","+pt14+" "+pt15+","+pt16+" x e";
sq3="m "+pt3+","+pt4+" l "+pt5+","+pt6+" "+pt13+","+pt14+" "+pt11+","+pt12+" x e";
sq4="m "+pt1+","+pt2+" l "+pt9+","+pt10+" "+pt15+","+pt16+" "+pt7+","+pt8+" x e";
v1.path=sq1; v2.path=sq2; v3.path=sq3; v4.path=sq4}
function init(){
for(i=1; i <=8; i++){ points[i]=new Obj('v'+i);}
points[1].x=45; points[1].y=15; points[1].z=60;
points[2].x=15; points[2].y=15; points[2].z=60;
points[3].x=15; points[3].y=15; points[3].z=90;
points[4].x=45; points[4].y=15; points[4].z=90;
points[5].x=45; points[5].y=45; points[5].z=60;
points[6].x=15; points[6].y=45; points[6].z=60;
points[7].x=15; points[7].y=45; points[7].z=90;
points[8].x=45; points[8].y=45; points[8].z=90;
for(i=1; i <=8; i++){ points[i].moveTo(points[i].x,points[i].y,points[i].z)}
}
function rot(){
a=degToRad(angle);
a2=degToRad(angle);
for(i=1; i <= 8; i++){
mat=[points[i].x,points[i].y,points[i].z-75,1];
rotX=[[1,0,0,0],[0,Math.cos(a),-Math.sin(a),0],[0,Math.sin(a),Math.cos(a),0],[0,0,0,1]];
rotY=[[Math.cos(a2),0,Math.sin(a2),0],[0,1,0,0],[-Math.sin(a2),0,Math.cos(a2),0],[0,0,0,1]];
rotZ=[[Math.cos(a),-Math.sin(a),0,0],[Math.sin(a),Math.cos(a),0,0],[0,0,1,0],[0,0,0,1]];
if(rotXok){mat=matrixMultiply(mat,rotX)};
if(rotYok){mat=matrixMultiply(mat,rotY)};
if(rotZok){mat=matrixMultiply(mat,rotZ)};
points[i].x=mat[0];
points[i].y=mat[1];
points[i].z=mat[2] + 75;
points[i].moveTo(points[i].x,points[i].y,points[i].z);
movemat();
}
setTimeout('rot()',50);
}
function matrixMultiply(A,B) {
var retVal=[0,0,0];
for(var i=0;i<4;i++) {
retVal[i]=0;
for(var s=0;s<4;s++)
retVal[i] += A[s] * B[i][s]
}
return retVal;
}
pi=3.14159;
function degToRad(x) { return (( x/(360/(2*pi)) )); }
function rotok(oked){
Xok=document.getElementById('rotateX').checked; if(Xok){rotXok=true}else{rotXok=false}
Yok=document.getElementById('rotateY').checked; if(Yok){rotYok=true}else{rotYok=false}
Zok=document.getElementById('rotateZ').checked; if(Zok){rotZok=true}else{rotZok=false}
}
</script>
<style type="text/css">
v\:*{behavior:url(#default#VML);}
</style>
</head>
<body bgcolor="black" text="darkblue">
<script>
for(i=1; i <= 4; i++){
document.write('<v:shape id="v'+i+'" filled="false" strokecolor="yellow" style="position:absolute;left:50;top:50;width:200;height:200" coordorigin="0, 0" coordsize="60,60">'
+'<v:path v="m 0,0 l 100,0 100,100 0,100 0,100 x e"/></v:shape>');
}init();rot()</script>
<br><br><br>
<p><font color=red>//。</font></p>

相關(guān)特效代碼

熱門特效代碼: js圖片自動切換代碼; CSS實現(xiàn)區(qū)域內(nèi)等比例放大縮小圖片; JS圖片切換效果; 飄動圖片廣告代碼; 鼠標(biāo)經(jīng)過圖片變大; 簡單高效的javascript 幻燈片播放; JavaScript封裝的平滑圖片滾動，; 點擊圖片出現(xiàn)大圖; 圖片局部放大效果特效; 圖片上下左右拉伸效果特效

推薦特效代碼: 點擊按鈕淡入淡出彈出圖文信息; 探照燈效果圖片特效代碼; 簡單高效的javascript 幻燈片播放; 飄動圖片廣告代碼; JavaScript封裝的平滑圖片滾動，; 超酷超絢精美圖片展示效果代碼