Home > Article > Web Front-end > Javascript realizes 3D transformation of three-dimensional circle example_javascript skills

Javascript realizes 3D transformation of three-dimensional circle example_javascript skills

WBOYOriginal: 2016-05-16 15:46:451266browse

The example in this article describes the implementation of 3D transformation of three-dimensional circles in JavaScript. Share it with everyone for your reference. The details are as follows:

Here we use javascript to implement three-dimensional circles that can transform, 3D changes on the web page, color-changing circle special effects, and 3D circle special effects on the web page. Each point on the circle has a different color, which can be seen more clearly against a black web page background.

The operation effect is as shown below:

The specific code is as follows:

<html>
<head>
<title>变色的圆圈</title>
<style type="text/css">
<!--
body {
background-color: #000000;
}
-->
</style></head>
<body>
<script language="JavaScript">
var CoLoUrS=new Array('ff0000','ffffff','0000ff','ffffff');
var dots=16;
var step=0.3;
var a_StEp=0.05;
var RunTime=Xpos =Ypos =count_a=count=currStep =0;
var cntr=70;
var move_a=move=1;
var curColour;
document.write('<div id="moveDiv" style="position:absolute;top:0px;left:0px">');
for (i=0; i < dots; i++){
  document.write('<div style="position:absolute;top:0px;left:0px;width:2px;height:2px;background:#ffffff;font-size:2px"></div>');
}
document.write('</div>');
var x = moveDiv.all;
var numdiv=new Array(x[0],x[1],x[2],x[3],x[4],x[5],x[6],x[7],x[8],x[9],x[10],x[11],x[12],x[13],x[14],x[15]);
function colourStep(){
  count+=move;
  if (count >= numdiv.length) {count=0;count_a+=move}
  if (count_a == CoLoUrS.length) count_a=0;
  numdiv[count].style.background=CoLoUrS[count_a];
  setTimeout('colourStep()',100)
}
function divmove(){
  Ypos = document.body.scrollTop+document.body.offsetHeight/2 + document.body.offsetHeight/2.8*Math.cos((RunTime)/3)*Math.cos(RunTime/10);
  Xpos= document.body.scrollLeft+document.body.offsetWidth/2 + document.body.offsetWidth/2.4*Math.sin((RunTime)/5)*Math.sin(RunTime/20);
  RunTime+=a_StEp;
  Tma=setTimeout("divmove()", 10);
}
function overturn(){
  for (i=0;i<numdiv.length;i++){
    numdiv[i].style.top = Ypos+cntr*Math.cos((currStep + i*4)/10.2)*Math.cos(currStep/10);
    numdiv[i].style.left= Xpos+cntr*Math.sin((currStep + i*4)/10.2);
  }
  currStep+=step;
  setTimeout("overturn()",10);
}
function Shrink(){
  cntr-=0.5;
  GoShrink=setTimeout('Shrink()',10);
  if (cntr <=20){clearTimeout(GoShrink);Swell()}
}
function Swell(){
  cntr+=0.5;
  GoSwell=setTimeout('Swell()',10);
  if (cntr >=70){clearTimeout(GoSwell);Shrink()}
}
function transfer(){
  divmove();  //移动层
  overturn();  //使层进行翻转
  Shrink();  //改变层的大小
  colourStep();  //变换层的颜色
}
transfer();
</script>
</body>
</html>

I hope this article will be helpful to everyone’s JavaScript programming design.

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：PhantomJS Quick Start Tutorial (Server-side JavaScript API WebKit)_javascript skillsNext article：PhantomJS Quick Start Tutorial (Server-side JavaScript API WebKit)_javascript skills

See more

Javascript realizes 3D transformation of three-dimensional circle example_javascript skills

Related articles