flip.js.coffee

$(document).ready ->
  $('#flip').click ->
    $('.flip-container').toggleClass('front back')

flip.sass

.flip-container
  height: 860px
  width: 940px
  margin: 0 auto
  &.back .flip
    transform: rotateY(180deg)
    -webkit-transform: rotateY(180deg)
    -moz-transform: rotateY(180deg)
    -ms-transform: rotateY(0deg)
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2, mirror=0)
  &.front .flip
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=0, mirror=0)
    transform: rotateY(0deg)
    -webkit-transform: rotateY(0deg)
    -moz-transform: rotateY(0deg)
    -ms-transform: rotateY(0deg)
  &.back
    .flip-back
      -ms-transform: rotateY(0deg)
    .flip-front
      -ms-transform: rotateY(180deg)

.back .flip .response-back, .front .flip .response-front
  z-index: 10

.flip
  -webkit-transition: 0.6s
  -webkit-transform-style: preserve-3d
  -ms-transition: 0.6s
  -moz-transition: 0.6s
  -moz-transform-style: preserve-3d
  -ms-transform-style: preserve-3d
  transition: 0.6s
  transform-style: preserve-3d
  position: relative

.flip-side
  z-index: 0
  overflow: hidden
  width: 100%
  -webkit-backface-visibility: hidden
  -moz-backface-visibility: hidden
  backface-visibility: hidden
  position: absolute
  transition: 0.6s
  transform-style: preserve-3d
  top: 0
  left: 0

.flip-front
  transform: rotateY(0deg)
  -webkit-transform: rotateY(0deg)
  -moz-transform: rotateY(0deg)
  -ms-transform: rotateY(0deg)
  filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=0, mirror=0)

.flip-back
  transform: rotateY(180deg)
  -webkit-transform: rotateY(180deg)
  -moz-transform: rotateY(180deg)
  -ms-transform: rotateY(-180deg)
  filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=4, mirror=1)
  
button.plans-button
  width: 260px
  display: block
  margin: 0 auto 40px
  border: none
  color: inherit
  vertical-align: middle
  position: relative
  z-index: 1
  -webkit-backface-visibility: hidden
  -moz-osx-font-smoothing: grayscale
  padding: 0.8em 3em
  border-radius: 40px
  font-size: 20px
  letter-spacing: 1px
  outline: none
  cursor: pointer
  background: rgba(96, 160, 182, 0.5)
  color: #fff
  overflow: hidden
  -webkit-transition: color 0.3s
  transition: color 0.3s
  background: none
  color: #fff
  &::before, &::after
    content: ''
    position: absolute
    height: 100%
    width: 100%
    bottom: 100%
    left: 0
    z-index: -1
    -webkit-transition: -webkit-transform 0.3s
    transition: transform 0.3s
    -webkit-transition-timing-function: cubic-bezier(0.75, 0, 0.125, 1)
    transition-timing-function: cubic-bezier(0.75, 0, 0.125, 1)
  &::before
    background: rgba(96, 160, 182, 0.8)
  &::after
    background: rgba(96, 160, 182, 1)
  &:hover
    color: #fff
    &::before
      -webkit-transform: translate3d(0, 100%, 0)
      transform: translate3d(0, 100%, 0)
    &::after
      -webkit-transform: translate3d(0, 100%, 0)
      transform: translate3d(0, 100%, 0)
      -webkit-transition-delay: 0.175s
      transition-delay: 0.175s
  
  
  
  
  
  

flip.slim

button#flip Flip

.flip-container.front
  .flip
    .flip-side.flip-front
    .flip-side.flip-back