<div id="app">
<!-- <ul>
  <li v-for="n in info">{{ n.name }}</li>
</ul> -->
  
<div id="filter">
  <div class="select" v-bind:class="{ active: openCube == true }" @click="openCube = !openCube, seeDetail = 0">View All</div>
  <div class="select" v-for="(param, index) in params" @click="paramSelected = index, openCube = false" v-bind:class="{ active: index==paramSelected && openCube == false }">
    <span>{{param}}</span>
  </div>

</div>
        
<div id="list" v-bind:class="'show-' + paramSelected">
  <div class="cube-container" v-bind:class="{ open: openCube, selected: seeDetail == index + 1 }" v-for="(item, index) in info" @click='seeDetail == 0 && !openCube ? seeDetail = index + 1 : seeDetail = 0'>
    <div class="cube">
      <div class="cube__face" :class="'cube__face--' + i + ' score-' + item.score[i]" v-for="(param, i) in params">
        <p class="param-title">{{param}}</p>
        <div class="param-score">{{item.score[i]}}</div>
        <span class="param-info">
          <h1>{{item.name}}</h1>
          <p>Score: {{item.score[i]}}/5</p>
        </span>
      </div>
    </div>
    <h1 class="case">{{item.name}}</h1>
  </div>
</div>
  
  
</div> <!-- END of APP -->

*
  box-sizing: border-box

body
  font-family: "Helvetica", sans-serif
  background-color: #222
  
  color: #fff
  margin: 40px
  user-select: none

.select
  display: inline-block
  border-radius: 2px
  padding: 16px 32px
  margin: 0px 24px 16px 0
  cursor: pointer
  background-color: #000
  transition: all .5s
  font-weight: bold


  &:hover
    background-color: #c03
    box-shadow: 0 1.4px 3.9px rgba(204, 0 , 51, 0.073), 0 3.5px 9.3px rgba(204, 0 , 51, 0.105), 0 6.5px 17.5px rgba(204, 0 , 51, 0.13), 0 11.6px 31.3px rgba(204, 0 , 51, 0.155), 0 21.7px 58.5px rgba(204, 0 , 51, 0.187), 0 52px 140px rgba(204, 0 , 51, 0.26)
  &.active
    background-color: #c03
    cursor: default

#list
  margin-top: 32px
  &.show-0 .cube-container .cube
    transform: translateZ(-100px) rotateX(0deg)
    &:hover
      transform: rotateX(10deg) rotateY(-5deg) translateZ(-100px)

  &.show-1 .cube-container .cube
    transform: translateZ(-100px) rotateY(-90deg)
    &:hover
      transform: rotateX(10deg) rotateY(-95deg) translateX(-100px)

  &.show-2 .cube-container .cube
    transform: translateZ(-100px) rotateY(-180deg)
    &:hover
      transform: rotateX(10deg) rotateY(-185deg) translateZ(100px)

  &.show-3 .cube-container .cube
    transform: translateZ(-100px) rotateY(90deg)
    &:hover
      transform: rotateX(10deg) rotateY(85deg) translateX(100px)

  &.show-4 .cube-container .cube
    transform: translateZ(-100px) rotateX(-90deg)
    &:hover
      transform: rotateX(-95deg) rotateZ(-10deg) translateY(100px)

  &.show-5 .cube-container .cube
    transform: translateZ(-100px) rotateX(90deg)
    &:hover
      transform: rotateX(100deg) rotateZ(-5deg) translateY(-100px)

.cube-container
  display: inline-block
  width: 200px
  height: 200px
  margin-right: 32px
  perspective: 400px
  transition: all .5s

  h1
    font-size: 16px
    text-overflow: ellipsis
  .param-info
    display: none
  .param-score
    display: block
    position: absolute
    top: 16px
    left: 16px
    font-size: 16px
    opacity: 1
  
  &.selected
    position: fixed
    top: 50%
    left: 50%
    margin-right: 0
    margin-left: -100px
    margin-top: -100px
    transform: scale3d(3, 3, 3)
    z-index: 1000000
    .case
      display: none
    .param-score
      display: none
    .param-title
      color: #fff
      opacity: 1
    .param-info
      display: block
      position: absolute
      top: 16px
      left: 16px
      h1
        margin: 0
      p
        font-size: 12px
        margin: 4px 0
    .score-0
      background-color: hsla(345, 100, 10, 0.95)
    .score-1
      background-color: hsla(345, 100, 16, 0.95)
    .score-2
      background-color: hsla(345, 100, 22, 0.95)
    .score-3
      background-color: hsla(345, 100, 28, 0.95)
    .score-4
      background-color: hsla(345, 100, 34, 0.95)
    .score-5
      background-color: hsla(345, 100, 40, 0.95)

.cube
  width: 200px
  height: 200px
  position: relative
  transform-style: preserve-3d
  transform: translateZ(-100px)
  transition: transform 1s
  

.cube__face
  position: absolute
  width: 200px
  height: 200px
  background-color: hsla(345, 100, 40, 0.7)
  transition: all .5s
  .param-title
    position: absolute
    bottom: 24px
    right: 24px
    margin: 0
    font-size: 16px
    font-weight: bold
    color: hsla(345, 100, 100, .8)
    text-align: left
    opacity: 1

.score-0
  background-color: hsla(345, 0, 0, 1)
.score-1
  background-color: hsla(345, 0, 8, 1)
.score-2
  background-color: hsla(345, 0, 16, 1)
.score-3
  background-color: hsla(345, 0, 24, 1)
.score-4
  background-color: hsla(345, 80, 40, 1)
.score-5
  background-color: hsla(345, 100, 40, 1)

.cube__face--0
  transform: rotateY(0deg) translateZ(100px)

.cube__face--1
  transform: rotateY(90deg) translateZ(100px)

.cube__face--2
  transform: rotateY(180deg) translateZ(100px)

.cube__face--3
  transform: rotateY(-90deg) translateZ(100px)

.cube__face--4
  transform: rotateX(90deg) translateZ(100px)

.cube__face--5
  transform: rotateX(-90deg) translateZ(100px)

  
.cube-container.open
  margin: 50px 350px 150px -50px
  perspective: 400px
  transform: scale3d(.5, .5, .5)
  .cube
    transform: translateZ(-100px) translateX(200px) rotateY(0deg) !important
  .cube__face--1
    transform: rotateY(0deg) translateX(200px) translateZ(100px)
  .cube__face--2
    transform: rotateY(0deg) translateX(400px) translateY(-200px) translateZ(100px)
  .cube__face--3
    transform: rotateY(0deg) translateX(-200px) translateZ(100px)
  .cube__face--4
    transform: rotateX(0deg) translateX(200px) translateY(-200px) translateZ(100px)
  .cube__face--5
    transform: rotateX(0deg) translateY(200px) translateZ(100px)
  h1.case
    position: absolute
    top: -200px
    margin: 0
    display: block
    height: 200px
    width: 400px
    font-size: 64px
  .param-title
    opacity: 1
    font-size: 24px
    text-align: right
  .param-score
    display: block
    position: absolute
    top: 16px
    left: 16px
    font-size: 32px
    opacity: 1

var App = new Vue({
  el: '#app',
  data: {
    params: ['Business', 'Craft', 'Culture', 'People', 'Innovation', 'Brands'],
    paramSelected: 0,
    openCube: false,
    parentMessage: 'Parent',
    seeDetail: 0,
    items: [
      { 
        name: "Sonic",
        score: [2, 4, 3, 5, 1, 0]
      },
      {
        name: "Michael Jordan",
        score: [5, 2, 1, 3, 4, 5]
      },
      { 
        name: "Bubly",
        score: [5, 3, 2, 1, 4, 2]
      },
      {
        name: "Next",
        score: [4, 1, 3, 5, 2, 2]
      }
    ]
  },
  computed: {
    info: function () {
      return _.orderBy(this.items, "score["+ this.paramSelected + "]", 'desc')
    }
  }
})