Card by Javierrocadev

1.card {
2  display: flex;
3  align-items: center;
4  justify-content: center;
5}
6
7.card * {
8  position: absolute;
9}
10
11.pentagon1 {
12  width: 250px;
13  height: 250px;
14  background: #03045e;
15  clip-path: polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%);
16  transition: all .3s ease-in-out;
17}
18
19.pentagon2 {
20  width: 220px;
21  height: 220px;
22  background: #0077b6;
23  clip-path: polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%);
24  transition: all .4s ease-in-out;
25}
26
27.pentagon3 {
28  width: 190px;
29  height: 190px;
30  background: #00b4d8;
31  clip-path: polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%);
32  transition: all .5s ease-in-out;
33}
34
35.pentagon4 {
36  width: 160px;
37  height: 160px;
38  background: #90e0ef;
39  clip-path: polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%);
40  transition: all .6s ease-in-out;
41}
42
43.pentagon5 {
44  width: 130px;
45  height: 130px;
46  background: #caf0f8;
47  clip-path: polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%);
48  transition: all .7s ease-in-out;
49}
50
51.card:hover .pentagon1 {
52  transform: scale(1.3) rotate(45deg);
53}
54
55.card:hover .pentagon2 {
56  transform: scale(1.3) rotate(90deg) translate(-20px,20px);
57}
58
59.card:hover .pentagon3 {
60  transform: scale(1.3) rotate(135deg) translate(-40px,40px);
61}
62
63.card:hover .pentagon4 {
64  transform: scale(1.3) rotate(190deg) translate(-60px,60px);
65}
66
67.card:hover .pentagon5 {
68  transform: scale(1.3) rotate(235deg) translate(-80px,80px);
69}
70
71/* .card:hover .pentagon1, .card:hover .pentagon2 , .card:hover .pentagon3, .card:hover .pentagon4, .card:hover .pentagon5 {
72    transform: scale(1.3) rotate(45deg);
73} */