.sandwitch_container
  .sandwitch
    .left
    .right
    .wall1
    .wall2
    .wall3
      .ham
      .cucumber
.buttons
  %button.x 縦に回転
  %button.y 横に回転
  %button.z 奥に回転

$sw_size: 100px
$sw_thick: 30px
$sw_color: AntiqueWhite 
$left_color: $sw_color
$right_color: $sw_color
$wall1_color: $sw_color
$wall2_color: $sw_color
$wall3_color: $sw_color

*
  box-sizing: border-box
html, body
  overflow: hidden
  height: 100%
  width: 100%
  background: black
  perspective: 2000px
  transform-origin: 50% 50%
  .sandwitch_container
    width: $sw_size * 2
    height: $sw_size * 3
    transform-style: preserve-3d
    transform-origin: 50% 50% #{$sw_size / 2}
    transition: transform 1s
    background: transparent
  .sandwitch
    position: absolute
    top: calc(50% - #{$sw_size / 2})
    left: calc(50%)
    height: $sw_size
    display: inline-block
    transform-origin: 50% 50% #{$sw_size / 2}
    transform: rotateX(-35deg) rotateY(-20deg) translate3d(-50%, -50%, #{$sw_size / 2})
    transform-style: preserve-3d
    perspective: 2000px
    > *
      transform-origin: 0
    .left, .right
      position: absolute
      top: 0
      left: 0
      display: inline-block
      border-bottom: $sw_size solid $sw_color
      border-right: $sw_size solid transparent
      color: skyblue
    .left
      border-bottom-color: $left_color
      transform-origin: 0
      transform: translate3d(0,  0px, 0)
    .right
      border-bottom-color: $right_color
      transform: translate3d(0,  0px, -$sw_thick)
    .wall1, .wall2, .wall3
      position: absolute
      top: 0
      left: 0
      width: $sw_thick
      height: $sw_size
      border: 1px  solid sienna
      border-top: none
      border-bottom: none
    .wall1
      background: $wall1_color
      transform: rotate3d(0, 1, 0, 90deg)
      border: 1px 0 1px 0 solid gray
    .wall2
      transform-origin: 0 100%
      background: $wall1_color
      transform: rotateY(90deg) rotateX(-90deg)
    .wall3
      transform-origin: 0 0
      background: $wall1_color
      transform: rotateY(90deg) rotateX(45deg) scale(1, 1.4142)
      .ham
        box-shadow: 0 0 2px 1px hotpink
        background: pink
        height: 80%
        width: 20%
        border-radius: 30%
        position: absolute
        top: 50%
        left: 40%
        transform: translate(-50%, -50%)
      .cucumber
        background-image: linear-gradient(lightgreen, green 30%, green 70%, lightgreen)
        background-size: 20%
        height: 80%
        width: 20%
        border-radius: 20%
        position: absolute
        top: 50%
        left: 60%
        transform: translate(-50%, -50%)

$ ->
  container = $('.sandwitch_container')
  t =
    x: 0
    y: 0
    z: 0
  set_t = ->
    container.css
      transform: ['rotateX(' + t.x + 'deg)', 'rotateY(' + t.y + 'deg)', 'rotateZ(' + t.z + 'deg)'].join(' ')
  $(document).on 'click', '.buttons button',  ->
    t[$(this).attr('class')] += 10
    set_t()