css 3d layered hover effects

Learn from youtube video

Github here

Step1:
Link Fontawesome icon stylesheet

Step2:
HTML

 Each five unordered list item which can hover contains five span tag. 
<span> is the layer of the card.And the last one span is the icon showing upper the shadows.
<span> class is according to the FontAwesome settings.


Step3:
css

 All the items should be in the center with the flex display.
Each list item transformed the shape with rotate and skew.

When hovering the each item, there is a shadow under each layer which will show more layered.
Each span is different position and opacity,which looks like in different z-index.

Change the color of each span.