JSFiddle - React, Tailwind, and code Playground

by Kocsten

HTML

<div class="vuniksadem_lodsa">
<label class="zornet_ru" for="zornet_ru-one" style="cursor:pointer">Первый</label>
 <label class="zornet_ru" for="zornet_ru-two" style="cursor:pointer">Второй</label>
 <label class="zornet_ru" for="zornet_ru-three" style="cursor:pointer">Третий</label>
 <input type="radio" name="zornet_rus" id="zornet_ru-one">
 <input type="radio" name="zornet_rus" id="zornet_ru-two">
 <input type="radio" name="zornet_rus" id="zornet_ru-three"> 

 <div class="cube">
 <div class="vesnikla_dzadtun">
 <h1>ZORNET.RU 1</h1>
 <p>СКРИПТЫ И КОДЫ САЙТА</p>
 </div>
 <div class="vesnikla_dzadtun">
 <h1>ZORNET.RU</h1>
 <p>ШАБЛОНЫ ДЛЯ ПОРТАЛА</p>
 </div>
 <div class="vesnikla_dzadtun">
 <h1>ZORNET.RU 3</h1>
 <p>МОДАЛЬНОЕ ОКНО САЙТА</p>
 </div>
 </div>
</div>

CSS

.vuniksadem_lodsa {
  -webkit-perspective: 76em;
  perspective: 76em;
  -webkit-perspective-origin: 50% 50px;
  perspective-origin: 50% 50px;
  width: 494px;
  margin: 0 auto;
  color: #fff;
  text-align: center;
}

input { display: none; }

.zornet_ru {
 position: absolute;
 width: 80px;
 height: 70px;
 background: pink;
 right: 0;
 line-height: 70px;
 font-weight: 300;
}

.zornet_ru:nth-child(1) {
 top: -5px;
 background: #0ead84;
}

.zornet_ru:nth-child(2) {
 top: 70px;
 background: #10717d;
}

.zornet_ru:nth-child(3) {
 top: 143px;
 background: #2342b5;
}

.cube {
 position: relative;
 margin: 60px auto 0;
 width: 300px;
 height: 200px;
 -webkit-transform-origin: 0 100px;
 -ms-transform-origin: 0 100px;
 transform-origin: 0 100px;
 -webkit-transform-style: preserve-3d;
 transform-style: preserve-3d;
 -webkit-transition: -webkit-transform 0.5s ease-in;
 transition: transform 0.5s ease-in;
}

.vesnikla_dzadtun {
 width: 300px;
 height: 200px;
 position: absolute;
}

.vesnikla_dzadtun h1 {
 font-size: 25px;
 margin: 75px 0 10px;
 font-weight: 300;
}

.vesnikla_dzadtun p { font-size: 12px; }

.vesnikla_dzadtun:nth-child(2) {
 -webkit-transform: translateZ(100px);
 transform: translateZ(100px);
 background: #0d7684;
}

.vesnikla_dzadtun:nth-child(1) {
 -webkit-transform: rotateX(-270deg) translateY(-100px);
 transform: rotateX(-270deg) translateY(-100px);
 -webkit-transform-origin: top left;
 -ms-transform-origin: top left;
 transform-origin: top left;
 background: #0f9673;
}

.vesnikla_dzadtun:nth-child(3) {
 -webkit-transform: rotateX(-90deg) translateY(100px);
 transform: rotateX(-90deg) translateY(100px);
 -webkit-transform-origin: bottom center;
 -ms-transform-origin: bottom center;
 transform-origin: bottom center;
 background: #1c38a0;
}
#zornet_ru-one:checked ~ .cube {
 -webkit-transform: rotateX(-90deg);
 transform: rotateX(-90deg);
}

#zornet_ru-two:checked ~ .cube {
 -webkit-transform: rotateX(0deg);
 transform:...