CSS Tiles with Elevation

#codepen #css #elevation #transform3d

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.

I also used avatar generator apis to get images:

DiceBear Avatars
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 😃💻🎨🎉

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more