<commit_before>/*------------------------------------*\
    #FLIPPER OBJECT
\*------------------------------------*/

/**
 * Provides a two-faced card that is 3d-rotated on mouse-over
 */


// Predefine the variables below in order to alter and enable specific features.
$o-flipper-speed: 1s !default;
$o-flipper-height: 400px !default;


.o-flipper {
  perspective: 1000px; /* entire container, keeps perspective */

  &:hover .o-flipper__inner {
    transform: rotateY(180deg); /* flip the pane when hovered */
  }
}

.o-flipper, .o-flipper__front, .o-flipper__back {
  width: 100%;
  height: $o-flipper-height;
}

.o-flipper__inner {
  transition: $o-flipper-speed;
  transform-style: preserve-3d;

  position: relative;
}

.o-flipper__front, .o-flipper__back {
  backface-visibility: hidden; /* hide back of pane during swap */

  position: absolute;
  top: 0;
  left: 0;
}

.o-flipper__front {
  z-index: 2;
  transform: rotateY(0deg); /* for Firefox 31 */
}

.o-flipper__back {
  transform: rotateY(180deg);
}<commit_msg>Add CSS code so that tile should work in IE for #150<commit_after>/*------------------------------------*\
    #FLIPPER OBJECT
\*------------------------------------*/

/**
 * Provides a two-faced card that is 3d-rotated on mouse-over
 * Should be compatible with IE10 and IE11.
 *
 * https://davidwalsh.name/css-flip
 *
 * 1. entire container, keeps perspective
 * 2. Flip the pane when hovered.
 * 3. Hide back of pane during swap.
 * 4. for Firefox 31
 */

/**
 * Variables
 * Predefine the variables below in order to alter and enable specific features.
 */

$o-flipper-speed: 1s !default;
$o-flipper-height: 400px !default;


.o-flipper {
  perspective: 1000px;  /* [1] */
  transform-style: preserve-3d;

  &:hover .o-flipper__front {
    transform: rotateY(180deg);  /* [2] */
  }
  &:hover .o-flipper__back {
    transform: rotateY(0deg);  /* [2] */
  }
}

.o-flipper, .o-flipper__front, .o-flipper__back {
  width: 100%;
  height: $o-flipper-height;
}

.o-flipper__inner {
  transition: $o-flipper-speed;
  transform-style: preserve-3d;

  position: relative;
}

.o-flipper__front, .o-flipper__back {
  backface-visibility: hidden;  /* [3] */
  transition: $o-flipper-speed;
  transform-style: preserve-3d;

  position: absolute;
  top: 0;
  left: 0;
}

.o-flipper__front {
  z-index: 2;
  transform: rotateY(0deg);  /* [4] */
}

.o-flipper__back {
  transform: rotateY(-180deg);
}
{'fraction_non_alphanumeric': 0.1998345055854365, 'fraction_numerical': 0.028547786512205214, 'mean_word_length': 2.51453488372093, 'pattern_counts': {'":': 0, '<': 3, '<?xml version=': 0, '>': 3, 'https://': 1, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '6647212', 'n_tokens_mistral': 925, 'n_tokens_neox': 881, 'n_words': 213}