@charset "UTF-8";

*,
*:before,
*:after {
  box-sizing: border-box;
}


body {
  height: 100vh;
  background: linear-gradient(135deg, #14141f 0%, #47476b 50%, #14141f  100%);
}

.flip {
  list-style: none;
  padding-left: 0;
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
  align-items: flex-start;
  perspective: 1000px;
  
  &__item {
    position: relative;
    width: 200px;
    height: 200px;
    background: blue;
    margin: 10px;
    
    a {
      position: absolute;
      width: 100%;
      height: 100%;
      top: 0;
      left: 0;
      z-index: 2;
      
      &.clip-0 {
        -webkit-clip-path: polygon(0 0, 100% 0, 50% 50%);
        clip-path: polygon(0 0, 100% 0, 50% 50%);
      }
      &.clip-1 {
        -webkit-clip-path: polygon(100% 0, 100% 100%, 50% 50%);
        clip-path: polygon(100% 0, 100% 100%, 50% 50%);
      }
      &.clip-2 {
        -webkit-clip-path: polygon(0 100%, 50% 50%, 100% 100%);
        clip-path: polygon(0 100%, 50% 50%, 100% 100%);
      }
      &.clip-3 {
        -webkit-clip-path: polygon(0 0, 50% 50%, 0 100%);
        clip-path: polygon(0 0, 50% 50%, 0 100%);
      }
      
      &.clip-0:hover,
      &.clip-1:hover,
      &.clip-2:hover,
      &.clip-3:hover {
        -webkit-clip-path: polygon(0 0, 100% 0, 50% 50%);
        clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
        z-index: 3;
      }
      /*
      &.hover {
        z-index: 3;
        -webkit-clip-path: none;
        clip-path: none;
      }*/
      
      &.clip-0:hover ~ .box {
        transform: rotateX(180deg);
      }
      &.clip-1:hover ~ .box {
        transform: rotateY(180deg);
      }
      &.clip-2:hover ~ .box {
        transform: rotateX(-180deg);
      }
      &.clip-3:hover ~ .box {
        transform: rotateY(-180deg);
      }
      
      
      &.clip-0:hover ~ .box:after, &.clip-2:hover ~ .box:after {
        transform: rotateX(-180deg);
      }
      &.clip-1:hover ~ .box:after, &.clip-3:hover ~ .box:after {
        transform: rotateY(-180deg);
      }
      
    }
    
    .box {
      position: absolute;
      width: 100%;
      height: 100%;
      box-shadow: 3px 3px 3px rgba(0,0,0,0.2);
      transform-style: preserve-3d;
      transition: transform .3s ease-in-out;
      
      &:before {
        content: "front";
        position: absolute;
        width: 100%;
        height: 100%;
        background: gray;
        z-index: 2;
        backface-visibility: hidden;
      }
      &:after {
        content: "back";
        position: absolute;
        width: 100%;
        height: 100%;
        background: green;
        transition-delay: .15s;
      }
    }
  }
}