.rayan3D-container {
  display:flex; align-items:center; justify-content:center; perspective:700px;
}
.rayan3D {
  width:200px; height:305px; position:relative; transform-style:preserve-3d; transform:rotateY(18deg); transition:1s ease; animation:1s ease 0s 1 initAnimation;
}
.rayan3D:hover {
  transform:rotateY(0deg);
}
.rayan3D > :first-child {
  position:absolute; top:0; left:0; background-color:#FFFFFF; width:200px; height:305px; transform:translateZ(22.5px); border-radius:0 2px 2px 0; box-shadow:0px 5px 20px #b2b2b2;
}
.rayan3D::before {
  position: absolute; content:''; left:-196px; top:1px; width:43px; height:303px; transform:translateX(176.5px) rotateY(90deg); background-color:#f3f3f3; border-left:solid 15px #e0e0e0; border-right:solid 1px #6c6c6c;
}
.rayan3D::after {
  position:absolute; top:0; left:0; content:' '; width:200px; height:305px; transform:translateZ(-22.5px); background-color:#666666; border-radius:0 2px 2px 0; box-shadow:0px 0 10px 6px #b2b2b2;
}
@media screen and (max-width: 880px) {
    .rayan3D {
      width:150px; height:220px;
    }
    .rayan3D > :first-child {
      width:150px; height:220px;
    }
    .rayan3D::after {
      width:150px; height:220px;
    }
    .rayan3D::before {
      height: 219px;
    }
}
@media screen and (max-width: 640px) {
    .rayan3D {
      width:110px; height:160px;
    }
    .rayan3D > :first-child {
        width:110px; height:160px;
    }
    .rayan3D::after {
        width:90px; height:160px; left:5px;
    }
    .rayan3D::before {
        height:159px; width:30px; left:-186px;
    }
}
@media screen and (max-width: 550px) {
    .rayan3D {
      width:190px; height:280px;
    }
    .rayan3D > :first-child {
        width:190px; height:280px;
    }
    .rayan3D::after {
      width:190px; height:280px; left:1px;
    }
    .rayan3D::before {
      height:279px; left:-196px; width:45px;
    }
}
@keyframes initAnimation {
  0% { transform: rotateY(0deg); }
  100% { transform: rotateY(18deg); }
}