- var values = ['flip-right', 'flip-left', 'flip-up', 'flip-down', 'flip-diagonal-right', 'flip-diagonal-left', 'flip-inverted-diagonal-right', 'flip-inverted-diagonal-left'];

each val in values
  div(class='card-wrapper ' + val)
    div.card
      div.front= val.split('-').join(' ')
      div.back BACK

@backgroundColor: #E7BDD6;
@cardFrontBackgroundColor: #FFFFFF;
@cardFrontForegroundColor: #FC545E;
@cardBackBackgroundColor: @cardFrontForegroundColor;
@cardBackForegroundColor: @cardFrontBackgroundColor;
@cardBorderColor: #FC545E;

.card-wrapper {
  display: inline-block;
  perspective: 1000px;

  //--------------------------------------------------
  // CARD FLIP RIGHT
  //--------------------------------------------------
  .card {
    position: relative;
    cursor: pointer;
    transition-duration: 0.6s;
    transition-timing-function: ease-in-out;
    transform-style: preserve-3d;

    .front, .back {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;

      backface-visibility: hidden;
      transform: rotateX(0deg);
    }

    .front {
      z-index: 2;
    }
  }

  //--------------------------------------------------
  // CARD FLIP RIGHT
  //--------------------------------------------------
  &, &.flip-right {
    .card {
      .back {
        transform: rotateY(180deg);
      }
    }

    &:hover {
      .card {
        transform: rotateY(180deg);
      }
    }
  }

  //--------------------------------------------------
  // CARD FLIP LEFT
  //--------------------------------------------------
  &.flip-left {
    .card {
      .back {
        transform: rotateY(-180deg);
      }
    }

    &:hover {
      .card {
        transform: rotateY(-180deg);
      }
    }
  }

  //--------------------------------------------------
  // CARD FLIP UP
  //--------------------------------------------------
  &.flip-up {
    .card {
      .back {
        transform: rotateX(180deg);
      }
    }

    &:hover {
      .card {
        transform: rotateX(180deg);
      }
    }
  }

  //--------------------------------------------------
  // CARD FLIP DOWN
  //--------------------------------------------------
  &.flip-down {
    .card {
      .back {
        transform: rotateX(-180deg);
      }
    }

    &:hover {
      .card {
        transform: rotateX(-180deg);
      }
    }
  }

  //--------------------------------------------------
  // DIAGONAL RIGHT
  //--------------------------------------------------
  &.flip-diagonal-right {
    .card {
      .back {
        transform: rotate3d(1, 1, 0, 180deg);
      }
    }

    &:hover {
      .card {
        transform: rotate3d(1, 1, 0, 180deg);
      }
    }
  }

  //--------------------------------------------------
  // DIAGONAL LEFT
  //--------------------------------------------------
  &.flip-diagonal-left {
    .card {
      .back {
        transform: rotate3d(1, 1, 0, -180deg);
      }
    }

    &:hover {
      .card {
        transform: rotate3d(1, 1, 0, -180deg);
      }
    }
  }

  //--------------------------------------------------
  // INVERTED DIAGONAL RIGHT
  //--------------------------------------------------
  &.flip-inverted-diagonal-right {
    .card {
      .back {
        transform: rotate3d(-1, 1, 0, 180deg);
      }
    }

    &:hover {
      .card {
        transform: rotate3d(-1, 1, 0, 180deg);
      }
    }
  }

  //--------------------------------------------------
  // INVERTED DIAGONAL LEFT
  //--------------------------------------------------
  &.flip-inverted-diagonal-left {
    .card {
      .back {
        transform: rotate3d(1, -1, 0, 180deg);
      }
    }

    &:hover {
      .card {
        transform: rotate3d(1, -1, 0, 180deg);
      }
    }
  }
}


/* DEMO */
body {
  background: @backgroundColor;
}

.card-wrapper, .card {
  width: 200px;
  height: 200px;
  
  margin: 10px;
}

.card {
  .front, .back {
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid @cardBorderColor;
    border-radius: 4px;
  }
  
  .front {
    color: @cardFrontForegroundColor;
    background: @cardFrontBackgroundColor;
    font-weight: 700;
    font-size: 1rem;
  }
  
  .back {
    font-size: 1.5rem;
    color: @cardBackForegroundColor;
    background: @cardBackBackgroundColor;
  }
}

//--------------------------------------------------
//  Author:   Welling Guzman
//  URL:      http://wellingguzman.com
//  Twitter:  http://twitter.com/wellingguzman
//--------------------------------------------------