%section.container
  #stack
    #card
      %figure.front.spade
      %figure.back

@import compass

@mixin rotate( $degrees )
  -webkit-transform: rotate(#{$degrees}deg)
  -moz-transform: rotate(#{$degrees}deg)
  -ms-transform: rotate(#{$degrees}deg)
  -o-transform: rotate(#{$degrees}deg)
  transform: rotate(#{$degrees}deg)

$table: #00cc88
$cardback:  url(https://www.toptal.com/designers/subtlepatterns/patterns/pink%20dust.png)
$cardfront: #fafafa

body
  background: $table
.container
  width: 500px
  height: 500px
  position: relative
  perspective: 800px
  margin: 20px auto
#stack
  background: $cardback
  height: 325px
  width: 250px
  border-radius: 10px
  position: absolute
  box-shadow: 2px 2px 2px rgba(0,0,0,.2)
  box-sizing: border-box
  padding: 10px
  box-shadow: 2px 2px 2px rgba(0,0,0,.2)
  transform: rotate(2deg)
  &:before
    top: -2px
    left: -2px
    transform: rotate(-1deg)
  &:after
    top: -5px
    left: -6px
    transform: rotate(-1.5deg)
  &:before, &:after
    content: ""
    background: $cardback
    height: 325px
    width: 250px
    display: block
    border-radius: 10px
    position: absolute
    box-shadow: 2px 2px 2px rgba(0,0,0,.2)
  #card
    width: 250px
    height: 325px
    position: absolute
    transform-style: preserve-3d
    transition: transform .4s ease, margin .6s ease .2s
    left: -3px
    top: -3px
    figure
      display: block
      position: absolute
      width: 100%
      height: 100%
      backface-visibility: hidden
      border-radius: 10px
      transition-delay: transform 1s
      &.front
        background: $cardfront
        transform: rotateZ(2deg) rotateY(180deg)
        &:after
          color: #555
          font-size: 120px
          font-family: arial
          position: absolute
          top: 80px
        &.spade
          &:after
            content: '♠'
            left: 95px
        &.club
          &:after
            content: '♣'
            left: 85px
        &.heart
          &:after
            content: '❤'
            left: 70px
            color: rgba(255,90,25,.8)
        &.diamond
          &:after
            content: '♦'
            left: 95px
            color: rgba(255,90,25,.8)
      &.back
        background: $cardback
  &:hover
    #card
      margin: -8px 0px 0px 300px
      transform: rotateY(-180deg)
      transition: transform .6s ease .4s, margin .8s ease
      figure
        box-shadow: 2px 2px 2px rgba(0,0,0,.2)
        
      

// Try a class of 'spade', 'club', 'diamond', or 'heart' for other aces
// Future missions (feel free to fork and help)
// Create combo class for any card. IE figure.front.three.spade = 3 of spades
// Why? I don't know.