CSS Tiles with Elevation

Inspiration

I wanted to explore and learn about transition, transform, rotate and translate properties/values of CSS3. I thought of creating a structure or layout, which will challenge everything mentioned.

Idea

So, I decided to create a floor like layout, which will need to have some 3d rotations. That floor will have children as tiles.

Now, I also want each tile to look thicker. And when I hover over them, they should elevate and a text will be displayed below it.

Resources

Mozilla Developer Network (MDN)'s resources really helped me. I went through below articles briefly to get started.

1. Using CSS transforms
2. <transform-function>
3. Using CSS transitions

I also used avatar generator apis to get images:

1. DiceBear Avatars
2. Trianglify Just in case 1st one doesn't work

Conclusion

I created a floor like layout with children as tiles. Hovering over tiles will elevate them nicely. I have created a pen, you can check it out below.

Let me know your ideas about it in the comments.

Happy coding 😃💻🎨🎉