shipshapecode/ember-3d-folding-panel

// center vertically and/or horizontally an absolute positioned element

@mixin center($xy:xy) {
  @if $xy == xy {
    bottom: auto;
    left: 50%;
    right: auto;
    top: 50%;
    transform: translateX(-50%) translateY(-50%);
  }
  @else if $xy == x {
    left: 50%;
    right: auto;
    transform: translateX(-50%);
  }
  @else if $xy == y {
    bottom: auto;
    top: 50%;
    transform: translateY(-50%);
  }
}

&.is-desktop {
  width: 600px;

  .fold-content {
    h2 {
      font-size: 2rem;
    }
  }
}

&.is-huge {
  @include center(x);

  width: 800px;

  .fold-content {
    padding: 4em;

    > * {
      transform: translateY(40px);
    }

    em {
      font-size: 1.4rem;
    }

    p {
      font-size: 1rem;
    }
  }

  .fold-left,
  .fold-right {
    float: left;
    height: 100%;
    width: 50%;
  }

  .fold-right {
    /* change perspective-origin so that the 2 fold sides have the same vanishing point */
    perspective-origin: 0% 50%;

    &:after {
      transform: translateX(-100%) rotateY(-90deg);
      transform-origin: right center;
    }
  }

  .fold-left {
    display: block;

    /* change perspective-origin so that the 2 fold sides have the same vanishing point */
    perspective-origin: 100% 50%;

    &:after {
      transform: translateX(100%) rotateY(90deg);
      transform-origin: left center;
    }
  }
}

// .folding-panel
& {
  height: 100vh;
  left: 0;
  overflow: hidden;
  position: fixed;
  top: 0;
  visibility: hidden;
  width: 100%;
  z-index: 1;

  .fold-content {
    height: 100%;
    left: 0;
    padding: 4em 2em;
    position: absolute;
    top: 0;
    visibility: hidden;
    width: 100%;

    > * {
      opacity: 0;
      transform: translateY(20px);
    }

    em {
      display: inline-block;
      font-size: 1.1rem;
      margin: 0.75em 0;
    }

    h2 {
      font-size: 1.5rem;
    }

    em,
    p {
      line-height: 1.6;
    }

    p {
      font-size: 1rem;
      margin-bottom: 1em;
    }
  }

  .fold-left,
  .fold-right {
    /* the :after elements of .fold-left and .fold-right are the 2 fold sides */
    height: 100vh;
    overflow: hidden;

    /* enable a 3D-space for children elements */
    perspective: 2000px;
    position: relative;
    width: 100%;

    &:after {
      /* 2 fold sides */
      backface-visibility: hidden;
      content: '';
      height: 100%;
      left: 0;
      position: absolute;
      top: 0;

      /* Force Hardware Acceleration */
      transform: translateZ(0);
      width: 100%;
    }
  }

  &.is-open {
    .fold-content {
      -webkit-overflow-scrolling: touch;
      overflow-y: auto;
      visibility: visible;

      > * {
        opacity: 1;
        transform: translateY(0);
      }
    }
  }
}