DEV Community

Cover image for CSS Tiles with Elevation
Dharmen Shah
Dharmen Shah

Posted on

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

Discussion (0)