3D effects produced by jsvml
<Html xmlns: v = "urn: schemas-microsoft-com: vml"> <STYLE> v \: * {Behavior: url (# default # VML)} body {margin: 0px} </STYLE> <BODY> <table width = "100%" height = 500 border = "0" cellspacing = "0" cellpadding = "0"> <tr> <td style = "border: 1px solid #000 "align = center> <v: group id = group style =" WIDTH: 700px; POSITION: relative; HEIGHT: 500px "coordsize =" 600,400 "> </v: group> </td> </tr> </table> <p align = center> <button onclick = "Run (+ 5 ); "> rotate left </button> <button onclick =" Stop (); "style =" margin: 0px 20px; "> pause rotation </button> <button onclick =" Run (-5 ); "> right rotation </button> </p> </BODY> </HTML> script var q = 40; var r = (q * 3.1415926) /180 var v = new Array () var l = new Array () v [0] = "0,400, 0" v [1] = "100,350, 15 "v [2] =" 200,400, 0 "v [3] =" 0,400,300 "v [4] =" 100,350,285 "v [5] =" 200,400,300 "v [6] =" 30,400, 30 "v [7] =" 30,450, 30 "v [8] =" 170,450, 30 "v [9] =" 170,400, 30 "v [10] =" 30,400,270 "v [11] =" 30,450,270 "v [12] =" 170,450,270 "v [13] =" 170,400,270 "v [14] =" 170,410,210 "v [15] =" 170,450,210 "v [16] =" 170,410,230 "v [17] =" 170,450,230 "v [18] =" 170,400,100 "v [19] =" 170,430,100 "v [20] =" 170,400,130 "v [21] =" 170,430,130 "v [22] =" 170,415,100 "v [23] =" 170,415,130 "v [24] =" 170,400,115 "v [25] =" 170,430,115 "v [26] =" 400,410, 0 "v [27] =" 400,415, 0 "v [28] =" 400,430, 0 "v [29] =" 390,420, 5 "v [30] =" 410,420, 0 "v [31] =" 390,450, 5 "v [32] =" 410,450, 0 "l [0] = Array () l [1] = Array) l [2] = Array () l [3] = Array () l [4] = Array () l [5] = Array) l [6] = Array () l [7] = Array () l [8] = Array () l [9] = Array) l [10] = Array () l [11] = Array () l [12] = Array () l [13] = Array) l [14] = Array () l [15] = Array () l [16] = Array () l [17] = Array) l [18] = Array (14,16) l [19] = Array (16,17) l [20] = Array (18,19) l [21] = Array (18,20) l [22] = Array () l [23] = Array () l [24] = Array () l [25] = Array) var lr = new Array () lr [0] = Array (26,28) lr [1] = Array (27,29) lr [2] = Array (27,30) lr [3] = Array (28, 31) lr [4] = Array (28, 32) function $ (obj) {return document. getElementById (obj)} function getxy (s) {var t = s. split (",") var a = new Array () a [0] = t [0]-0 + t [2] * Math. cos (r) a [1] = t [1]-t [2] * Math. sin (r) return. join ()} function setline () {var str = "" for (var I = 0; I <l. length; I ++) {str + = "<v: line from = \" "+ getxy (v [l [I] [0]) + "\" to = \ "" + getxy (v [l [I] [1]) + "\" strokeColor = \ "Gray \"/> "}$ (" box "). innerHTML = str} function set_jd (s) {q = s r = (q * 3.1415926)/180 setline () set_ren ()} function set_ren () {var str = "" for (var I = 0; I <lr. length; I ++) {str + = "<v: line from = \" "+ getxy (v [lr [I] [0]) + "\" to = \ "" + getxy (v [lr [I] [1]) + "\"> "if (I = 0) str + = "<v: stroke StartArrow = \" Oval \ "/>" str + = "</v: line>" }$ ("ren "). innerHTML = str} var timer; function Run (n) {Stop (); timer = window. setInterval (function () {set_jd (q + n) }, 200);} function Stop () {window. clearInterval (timer);} setline () set_ren () Run (+ 1) script
[Ctrl + A select all Note: If you need to introduce external Js, You need to refresh it to execute]