Styles to create a flippable card.

cardFlip.scss

/////////////////////////////////////////////
//
// Flipable Card
//
// Markup:
//   .flip
//     .flip__inner
//       .front
//       .back
//

// scss-lint:disable SelectorFormat
%side_base_styles {
  @include vendor_prefix(
    backface-visibility,
    hidden
  );
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
}
// scss-lint:enable SelectorFormat



// primary container for flipable element
.flip {
  @include vendor_prefix(
    perspective,
    1000
  );
  @include vendor_prefix(
    transform-style,
    preserve-3d
  );
}

.flip--flipped {
  .flip__inner {
    @include vendor_prefix(
      transform,
      rotateY(180deg)
    );
  }
}

.flip__inner {
  @include vendor_prefix(
    transform-style,
    preserve-3d
  );
  @include vendor_prefix(
    transition,
    600ms
  );
  position: relative;

  .front {
    @extend %side_base_styles;
    @include vendor_prefix(
      transform,
      rotateY(0deg)
    );
    z-index: 2;
  }

  .back {
    @extend %side_base_styles;
    @include vendor_prefix(
      transform,
      rotateY(180deg)
    );
  }
}

cardFlipOption2.scss

/////////////////////////////////////////////
//
// Flipable Card
//
// Markup:
//   .flip
//     .flip__inner
//       .front
//       .back
//

// scss-lint:disable SelectorFormat
%side_base_styles {
  @include vendor_prefix(
    backface-visibility,
    hidden
  );
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
}
// scss-lint:enable SelectorFormat



// primary container for flipable element
.flip {
  @include vendor_prefix(
    perspective,
    1000
  );
  @include vendor_prefix(
    transform-style,
    preserve-3d
  );
}

.flip--flipped {
  .flip__inner {
    @include vendor_prefix(
      transform,
      rotateY(180deg)
    );
  }
}

.flip__inner {
  @include vendor_prefix(
    transform-style,
    preserve-3d
  );
  @include vendor_prefix(
    transition,
    600ms
  );
  position: relative;

  .front {
    @extend %side_base_styles;
    @include vendor_prefix(
      transform,
      rotateY(0deg)
    );
    z-index: 2;
  }

  .back {
    @extend %side_base_styles;
    @include vendor_prefix(
      transform,
      rotateY(180deg)
    );
  }
}