Array grid of 3d css cubes hover over each cube style box sizing border box body font family sans serif min height 700px scene position absolute left 0px top 0px width 200px height 200px border 1px solid CCC perspective 400px cube width 200px height 200px position relative transform style preserve 3d transform translateZ 100px transition transform 1s cube hover transform translateZ 100px rotateY 90deg 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 id refcube class scene style display none div class cube 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 div script for let x 0 x 10 x for let y 0 y 10 y let refcube document getElementById refcube let newcube refcube cloneNode true document body appendChild newcube let size 50 let s size 200 newcube style display inline newcube style left 20 x 63 px newcube style top 20 y 63 px newcube style transform translate 100px 100px scale s translate 100px 100px x y script
ateZ 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 id refcube class scene style display none div class cube 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 div script for let x 0 x 10 x for let y 0 y 10 y let refcube document getElementById refcube let newcube refcube cloneNode true document body appendChild newcube let size 50 let s size 200 newcube style display inline newcube style left 20 x 63 px newcube style top 20 y 63 px newcube style transform translate 100px 100px scale s translate 100px 100px x y script