• Cubic photo frame (CSS and Java)

    Keith • 06/04/2024 at 12:53 • 0 comments

    Not my code, and no Python, but a I found some code demonstrating how CSS can rotate images in more than the plane of the screen (i.e. around the Z axis) and a specified origin. 

    The CSS code displays six images as faces of a 3-D cube, which is animated by some JavaScript. The original code had images from Marvel superhero movies. 

    I made a few changes to the images and the background, and got this...

    The original authors added a matching moving reflection underneath, and I put this on the black background to make it look like witch's black scrying stone. I'd like to increase the time it takes to stop moving, to give the 'inertia' of a modestly weighty object. Or have it not stop at all.

    I discovered the original cube had only three unique face designs. I arranged them so that the duplicates are on opposing sides. I already knew that opposing sides of a gaming dice always added up to the value seven but I learned that they can have "chirality". Looking at a vertex with sides 1, 2 and 3, they may be in clockwise or anti-clockwise order. 

    The puzzle box in the movie would perform various transformations that can't all be replicated in a real-world object, but could be done with computer graphics if I had time.

    I thought of another iconic cube, and created a suitable image and background just as quickly:

    The background is Earth, but not obviously so. I changed it to a recognisable image of Europe at night and removed the reflection.