style box sizing border box body font family sans serif perspective 400px cube left 0px top 0px width 200px height 200px position absolute transform style preserve 3d transform translateX 600px translateY 0px translateZ 100px transition transform 1s display none cube face position absolute width 200px height 200px border 2px solid black line height 200px font size 40px font weight bold color white text align center cube face front background hsla 0 100 50 0 7 cube face right background hsla 60 100 50 0 7 cube face back background hsla 120 100 50 0 7 cube face left background hsla 180 100 50 0 7 cube face top background hsla 240 100 50 0 7 cube face bottom background hsla 300 100 50 0 7 cube face front transform rotateY 0deg translateZ 100px cube face right transform rotateY 90deg translateZ 100px cube face back transform rotateY 180deg translateZ 100px cube face left transform rotateY 90deg translateZ 100px cube face top transform rotateX 90deg translateZ 100px cube face bottom transform rotateX 90deg translateZ 100px label margin right 10px style div class cube id cube0 div class cube face cube face front front div div class cube face cube face back back div div class cube face cube face right right div div class cube face cube face left left div div class cube face cube face top top div div class cube face cube face bottom bottom div div script function createCube p x 0 y 0 z 0 d x 1 y 1 z 1 a x 0 y 0 z 0 let c document getElementById cube0 console log p let c1 c cloneNode true document body appendChild c1 c1 style display inline block c1 style transform translate3d p x px p y px p z px scale3d d x d y d z rotateX a x deg rotateY a y deg rotateZ a z deg return c1 function random lo hi return lo Math random hi lo for let i 0 i 20 i let p x random 500 900 y random 100 900 z random 600 1700 let d x random 0 5 1 5 y random 0 5 1 5 z random 0 5 1 5 let a x random 90 180 y random 90 180 z 90 180 let nc createCube p d a setInterval function nc style transform translate3d p x px p y px p z px scale3d d x d y d z rotateX a x deg rotateY a y deg rotateZ a z deg a y 2 i a z 10 500 console log ready script
s cube face cube face front front div div class cube face cube face back back div div class cube face cube face right right div div class cube face cube face left left div div class cube face cube face top top div div class cube face cube face bottom bottom div div script function createCube p x 0 y 0 z 0 d x 1 y 1 z 1 a x 0 y 0 z 0 let c document getElementById cube0 console log p let c1 c cloneNode true document body appendChild c1 c1 style display inline block c1 style transform translate3d p x px p y px p z px scale3d d x d y d z rotateX a x deg rotateY a y deg rotateZ a z deg return c1 function random lo hi return lo Math random hi lo for let i 0 i 20 i let p x random 500 900 y random 100 900 z random 600 1700 let d x random 0 5 1 5 y random 0 5 1 5 z random 0 5 1 5 let a x random 90 180 y random 90 180 z 90 180 let nc createCube p d a setInterval function nc style transform translate3d p x px p y px p z px scale3d d x d y d z rotateX a x deg rotateY a y deg rotateZ a z deg a y 2 i a z 10 500 console log ready script