Cacher is the code snippet organizer for pro developers

ul {
  -webkit-transform-style: preserve3d;
  -moz-transform-style: preserve3d;
  -ms-transform-style: preserve3d;
  -o-transform-style: preserve3d;
  transform-style: preserve3d;
  -webkit-perspective: 30%;
  -moz-perspective: 30%;
  perspective: 30%;
}

li {
  opacity: 0;
  -webkit-transform: rotateX(-90deg);
  -moz-transform: rotateX(-90deg);
  -ms-transform: rotateX(-90deg);
  -o-transform: rotateX(-90deg);
  transform: rotateX(-90deg);
  -webkit-transition: opacity 0.25s ease-in-out, -webkit-transform 0.25s ease-in-out;
  -moz-transition: opacity 0.25s ease-in-out, -moz-transform 0.25s ease-in-out;
  transition: opacity 0.25s ease-in-out, transform 0.25s ease-in-out;
}

li[data-active="true"] {
  opacity: 1;
  -webkit-transform: rotateX(0);
  -moz-transform: rotateX(0);
  -ms-transform: rotateX(0);
  -o-transform: rotateX(0);
  transform: rotateX(0);
}

// ----
// Sass (v3.3.10)
// Compass (v1.0.0.alpha.20)
// Bourbon (v4.0.2)
// ----

@import "bourbon/bourbon";
ul {
  @include transform-style(preserve3d);
  @include perspective(30%);
}
li {
  opacity: 0;
  @include transform(rotateX(-90deg));
  
  @include transition(opacity .25s ease-in-out, transform .25s ease-in-out);
}
li[data-active="true"] {
 opacity: 1;
 @include transform(rotateX(0));
}