Rotating Cube with Content

Recently, someone had posted a question regarding making a three-dimensional cube that could rotate while displaying slide content.  I thought that was an interesting idea, if for no other reason than the challenge of getting it to work. In the end, I came up with the following approach. 

Demo: https://360.articulate.com/review/content/5a6a6419-1b93-4269-9f33-f88d9cd9eb94/review

This could be useful to make content a bit more interactive, to spice-up rolling dice simulations, or possibly to use in gamified learning environments.

For simplicity, I just group whatever content I want to display on each cube face into six different Groups on the Storyline slide. If it is groupable, it will probably work. Text, shapes, images, video, and buttons all seemed to work fine. You'll have to experiment. Make the groups square and stack them directly on top of each other, at whatever location you want on the slide. Insert the included JavaScript on the Slide Master, with its trigger, and add the handful of additional variables and variable triggers to your project slides. This demo is setup to rotate the cube when you click on the edges of the faces.

The code can definitely be improved (I am a JavaScript hack), and it could be modified to accommodate not requiring groups, generating box-like objects with different sized faces, or even objects with different numbers of faces if you want to work out the geometry. You can also add custom rotation animations, such as for rolling a random number on dice.

The script is based on this GSAP demo. It essentially locates your face content, reorganizes it into a new DIV container, repositions the content in 3-d space, and then rotates it on request. The hardest part was getting the resizing routines to work properly. Slide 2 is the simplest, so you might want to use that as the template.