JSFiddle - React, Tailwind, and code Playground

HTML

<div>
Test
</div><div>
Test
</div><div>
Test
</div><div>
Test
</div><div>
Test
</div><div>
Test
</div>

<div class="turning">
<span>Content</span>
</div>

CSS

.turning {
  width: 80%;
  height: 120px;
  background-color: #00FF00;
}
.turning:active {
  background: red;
  animation: 10.5s;
  display: block !important;
  position: fixed;

  content: "";
  overflow: hidden;
  animation: resizeList 10.5s forwards;
}
.turning:active * {
  animation: fadeContent 1s forwards;
}
@keyframes  fadeContent {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
@keyframes  resizeList {

  25% {
    width: 100%;
	  height: 50px;
	  top: 10px;
	  left: 0%;
	  // transform: translate(0%, 0%) rotateY(0deg);
	  border-radius: 0%;
  }
  100% {
	  border-radius: 50%;
	  top: calc(50% - 50px);
	  left: calc(50% - 50px)";
	  // transform: translate(~"calc(50vw - 50px)", ~"calc(50vh - 50px)") rotateY(180deg);
	  transform: rotateY(180deg);
    width: 100px;
	  height: 100px;
  }
}