DEV Community

Cover image for World's First CSS-only Photo Cubes
Ali Shata
Ali Shata

Posted on

World's First CSS-only Photo Cubes

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

Top comments (0)