<div class="full page">
  <div class="menu" id="openNav"></div>
  <div class="cube">3D Cube Menu</div>
</div>
<div class="full nav">
  <div class="menu crossed" id="closeNav"></div>
</div>

html, body
  height: 100%

body
  perspective: 600px
  background: #111
  font-family: -apple-system, BlinkMacSystemFont, "myriad-pro", sans-serif
  overflow: hidden
  @media screen and (max-width: 768px)
    perspective: 300px

.full
  position: fixed
  top: 0
  left: 0
  display: block
  width: 100%
  height: 100%
  //transform-style: preserve-3d
  transition: all .6s linear
  background: white

.menu
  position: absolute
  right: 30px
  top: 30px
  width: 48px
  height: 48px
  border-radius: 50%
  transition: all .2s linear
  cursor: pointer
  &:active
    background: #eee
  &::before, &::after
    content: ''
    position: absolute
    top: 23px
    left: 14px
    height: 2px
    width: 20px
    background: black
    pointer-events: none
    transition: all .2s linear
  &::before
    transform: translateY(-3px)
  &::after
    transform: translateY(3px)
  &.crossed
    &::before
      transform: rotate(45deg)
    &::after
      transform: rotate(135deg)

.page
  transform-origin: right center
  transform: translateX(0) rotateY(0)
  z-index: 1
  opacity: 1
  &.swipe-lft
    opacity: 0.5
    z-index: 0
    transform: translateX(-100%) rotateY(-35deg)

.nav
  transform-origin: left center
  transform: translateX(100%) rotateY(35deg)
  z-index: 0
  opacity: 0.5
  &.open
    opacity: 1
    z-index: 1
    transform: translateX(0) rotateY(0deg)

.cube
  position: absolute
  top: 50%
  left: 50%
  transform: translate(-50%,-50%)
  font-size: 5vw
  font-weight: 600
  color: #C8CCD4
  pointer-events: none
  @media screen and (max-width: 768px)
    font-size: 24px
    white-space: nowrap

$("#openNav").click(function() {
  $(".page").addClass("swipe-lft");
  $(".nav").addClass("open");
});
$("#closeNav").click(function() {
  $(".page").removeClass("swipe-lft");
  $(".nav").removeClass("open");
});