3D旋转的立方体特效代码-JS特效-爱易网页

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

日期：2014-05-18　浏览次数：20336 次

欢迎光临爱易网网页脚本特效中心，点击运行按钮演示特效：

以下是程序代码

有什么问题请到<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);
}

<div class="clearfix"></div>
                    </div>
                    <nav aria-label="...">
                        <ul class="pager">
                            <li class="previous"><a href="4667">上一篇：狡猾的按钮特效</a></li>

<li class="next"><a href="1524">下一篇：上下连续无间断滚动图像</a></li>
                        </ul>
                    </nav>

<div class="alert alert-warning" role="alert">
                        <strong>免责声明：</strong> 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
                    </div>

<div class="col-md-6 col-xs-12">
                      <li class="articleAbout"><a href='/ItNews/6857' title='惠普董事长莱恩辞职 为巨额财务减记埋单' target="_blank">
                        惠普董事长莱恩辞职 为巨额财务减记埋单</a></li></div>
                   
                
                  <div class="col-md-6 col-xs-12">
                      <li class="articleAbout"><a href='/ItNews/10837' title='200美元英特尔Android笔记本行将到来' target="_blank">
                        200美元英特尔Android笔记本行将到来</a></li></div>
                   
                
                  <div class="col-md-6 col-xs-12">
                      <li class="articleAbout"><a href='/ItNews/34289' title='阿里巴巴上市后雅虎将面临更大的业绩压力' target="_blank">
                        阿里巴巴上市后雅虎将面临更大的业绩压力</a></li></div>
                   
                
                  <div class="col-md-6 col-xs-12">
                      <li class="articleAbout"><a href='/ItNews/34288' title='工信部或本月17日向联通电信颁发FDD牌照' target="_blank">
                        工信部或本月17日向联通电信颁发FDD牌照</a></li></div>
                   
                
                  <div class="col-md-6 col-xs-12">
                      <li class="articleAbout"><a href='/ItNews/10822' title='360涉足搜索范围 百度市场份额面临应战' target="_blank">
                        360涉足搜索范围 百度市场份额面临应战</a></li></div>
                   
                
                  <div class="col-md-6 col-xs-12">
                      <li class="articleAbout"><a href='/ItNews/34267' title='华为变阵:任正非调整三大业务布局' target="_blank">
                        华为变阵:任正非调整三大业务布局</a></li></div>
                   
                
                  <div class="col-md-6 col-xs-12">
                      <li class="articleAbout"><a href='/ItNews/34352' title='纸媒深探版权蓝海抗衡互联网的时机到来了' target="_blank">
                        纸媒深探版权蓝海抗衡互联网的时机到来了</a></li></div>
                   
                
                  <div class="col-md-6 col-xs-12">
                      <li class="articleAbout"><a href='/ItNews/34275' title='阿里巴巴450亿勾画“现代服务业”藏宝图' target="_blank">
                        阿里巴巴450亿勾画“现代服务业”藏宝图</a></li></div>
                   
                
                  <div class="col-md-6 col-xs-12">
                      <li class="articleAbout"><a href='/ItNews/34138' title='中兴通讯不打机海战术 将向中高端手机转型' target="_blank">
                        中兴通讯不打机海战术 将向中高端手机转型</a></li></div>
                   
                
        </ol>
    </div>
</div>

</div>

</div>
            </div>
            <div class="clearfix"></div>

<footer class=" footer navbar-bottom">
<em>友情链接：</em>
    
      <a href="http://www.aiyiweb.com/" target="_blank">爱易网 </a>            
    
      <a href="http://www.aiyiweb.com/" target="_blank">云虚拟主机技术 </a>            
    
      <a href="http://www.aiyiweb.com/" target="_blank">云服务器技术 </a>            
    
      <a href="http://www.aiyiweb.com/" target="_blank">程序设计技术 </a>            
    
      <a href="http://www.aiyiweb.com/" target="_blank">开发网站 </a>            
    
      <a href="http://www.aiyiweb.com/" target="_blank">APP开发教程 </a>            
    
<br />
<script type="text/javascript">(function(){document.write(unescape('%3Cdiv id="bdcs"%3E%3C/div%3E'));var bdcs = document.createElement('script');bdcs.type = 'text/javascript';bdcs.async = true;bdcs.src = 'http://znsv.baidu.com/customer_search/api/js?sid=15239353030108964139' + '&plate_url=' + encodeURIComponent(window.location.href) + '&t=' + Math.ceil(new Date()/3600000);var s = document.getElementsByTagName('script')[0];s.parentNode.insertBefore(bdcs, s);})();</script>

Copyright © 2013-2026 爱易网页 当前在线：240人　
        网站在5时38分23秒内访问总人数：63190人
    当前 8.60%
　<a href="https://beian.miit.gov.cn" target="_blank">粤ICP备18100884号-2 </a>
<script charset="UTF-8" id="LA_COLLECT" src="//sdk.51.la/js-sdk-pro.min.js"></script>
<script>LA.init({ id: "JszEmKrtpbU59dY5", ck: "JszEmKrtpbU59dY5" })</script>

</footer>

</div>
   
</body>
</html>