3D旋转的立方体特效代码

稿源：互联网 2022-04-19 16:01:54 点击： 5088 撤稿纠错

3D旋转的立方体特效代码，很漂亮的一个特效，下载下来跟据您的需要自定义吧。

以下讨论的是和特效旋转 3D相关的3D旋转的立方体特效代码教程文章，内容是本站精心挑选整理的教程，希望对广大的网友给到帮助,下面是详细内容：

脚本代码(For Alixixi.com)如下:

有什么问题请到<a href='/bbs/index.asp?boardid=2'>论坛</a>中发表<br>


<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);
}

<br><br><br>
<p><font color=red>//转载请注明出处:网页教学网。</font></p>

<a href="http://www.alixixi.com/Dev/HTML/jsrun/">欢迎访问阿里西西网页特效集</a>

关于3D旋转的立方体特效代码的内容写到这里就结束啦，您可以收藏本页网址https://js.alixixi.com/a/20080714838.shtml方便下次再访问哦。

·上一篇： 上下连续无间断滚动图像
·下一篇： 对联式的图片广告代码

3D旋转的立方体特效代码

文章分类LIST >>返回首页

最新游戏

最新新闻