Map videos onto CSS cube faces also transition and animate the cube rotating style box sizing border box body font family sans serif scene width 200px height 200px border 0px solid CCC margin 80px perspective 400px cube width 200px height 200px position relative transform style preserve 3d transform translateZ 100px transition transform 2s 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 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 videoInsert position absolute top 0 left 0 width 100 height 100 object fit fill border 0 margin 0 style div class scene div class cube div class cube__face cube__face front video class videoInsert src https notebook xbdev net var resources fire2 mp4 autoplay loop video div div class cube__face cube__face back back div div class cube__face cube__face right video class videoInsert src https notebook xbdev net var resources test mp4 autoplay loop video 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 setInterval function let angs 0 90 90 180 let idx 0 let idy 0 if Math random 0 5 idx Math floor Math random angs length else idy Math floor Math random angs length var cube document querySelector cube cube style transform translateZ 100px rotateX angs idx deg rotateY angs idy deg 2000 console log ready script
yle div class scene div class cube div class cube__face cube__face front video class videoInsert src https notebook xbdev net var resources fire2 mp4 autoplay loop video div div class cube__face cube__face back back div div class cube__face cube__face right video class videoInsert src https notebook xbdev net var resources test mp4 autoplay loop video 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 setInterval function let angs 0 90 90 180 let idx 0 let idy 0 if Math random 0 5 idx Math floor Math random angs length else idy Math floor Math random angs length var cube document querySelector cube cube style transform translateZ 100px rotateX angs idx deg rotateY angs idy deg 2000 console log ready script