body {
  height: 100vh;
  margin: 0;
  overflow: hidden;
  background : #7E7E7E;
}

polygon {
  stroke: rgba(0, 0, 0, 0.1);
  cursor: pointer;
  -webkit-transform-origin: center center;
      -ms-transform-origin: center center;
          transform-origin: center center;
  -webkit-transition: all .7s;
          transition: all .7s;
}
polygon:not(.flip):hover {
  fill: rgba(0, 0, 0, 0.7);
}
polygon:hover {
  stroke: rgba(0, 0, 0, 0.7);
}
polygon.flip {
  -webkit-transform: rotate3d(-1, 1, 0, 360deg);
          transform: rotate3d(-1, 1, 0, 360deg);
  fill: transparent;
  cursor: default;
}