World’s First CSS-only Photo Cubes



This content originally appeared on DEV Community and was authored by Ali Shata

It started with a project called “Mobile Tab Navigation” which is the 38th project in a course named “50 projects in 50 days”, and as I was coding it an idea of (3Difying the Mobile itself using) knocked my head, so I began searching and digging about this topic, and found that CSS perspective along with CSS transforms, could create mind-blowing stuff while keeping the process simple & ease.

After making a CSS-only 3D model of the mobile, and added many features that didn’t exist in the course’s version, I was stuck by the idea of making a CSS-only HOLOGRAM, which I’ll write about in a future article, and inside this hologram there will be a Cube that shows the mobile’s wallpaper, then I made many versions, some of them was miserable, some was prettty good, and here are the prettty ones:

CSS Photo Cube 1

CSS Photo Cube 2

CSS Photo Cube 3

CSS Photo Cube 4

Here is the CodePen (take a tour there!): CSS-only 3D Photo Cube

Thanks for reading. Wanna know more? Wanna see something else? Come and find me on Twitter! alishata128


This content originally appeared on DEV Community and was authored by Ali Shata