JSFiddle - React, Tailwind, and code Playground

by joaolvcm

HTML

<div class="doors">

  <div class="door d1">
    <div class="door d2">
    <div class="shadow r"></div>
      <div class="door d3">
       <div class="shadow l"></div>
        <div class="door d4">

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






</div>

CSS

.doors{
  perspective:1050px
}

.door {
  display: inline-block;
  position:relative;
  width: 53px;
  height: 110px;
  background: linear-gradient(#B8DCF4, #87a3b9);
  box-shadow: inset 0 0 4px grey, 0 0 0 1px #CFCFCF, 0 0 0 3px white, 0 0 0 4px #CFCFCF;
  margin-right: 4px;
  transition: transform 1s ease-in-out;
  transform-origin: left center;
  transform-style: preserve-3d;
  
}

.doors .d1 {
  animation: animfirst 2s infinite;
  
}
.doors .d2,
.doors .d4 {
  animation: animeven 2s infinite;
}

.doors .d3 {
  animation: animodd 2s infinite;
}

.d2,.d3,.d4 {
  transform: translateX(60px);
}

.shadow{
  position: absolute;
  height:110px;
  width:53px;
  opacity:0;
  transition: opacity 1s ease-in-out;

}
.shadow.r{
    background: linear-gradient(to left, rgba(48, 48, 48, 0.24), rgba(0, 0, 0, 0.05));
}

.shadow.l{
    background: linear-gradient(to right, rgba(48, 48, 48, 0.24), rgba(0, 0, 0, 0.05));
}

.doors:hover .shadow{
  opacity:1;
}

@keyframes animfirst {
    0% { transform: translate3d(0, 0, 0) rotate3d(0, 0, 0, 0); }
    50% { transform: translate3d(0, 0, 0) rotate3d(0, 1, 0, -50deg); }
    100% { transform: translateX(0) rotate3d(0, 0, 0, 0); }
}

@keyframes animeven{
  0% { transform: translateX(60px) rotate3d(0, 0, 0, 0); }
  50% { transform: translate3d(60px, 0, 0) rotate3d(0, 1, 0, 130deg); }
  100% { transform:translateX(60px) rotate3d(0, 0, 0, 0); }
}

@keyframes animodd{
  0% { transform: translateX(60px) rotate3d(0, 0, 0, 0); }
  50% { transform: translate3d(60px, 0, 0) rotate3d(0, 1, 0, -130deg);}
  100% { transform: translateX(60px) rotate3d(0, 0, 0, 0); }
}