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