CodePen

HTML

            
              
<div class="promo">

  <div class="gift-cards">
    <figure class="card_0"><img src="http://images.apple.com/itunes/home/images/giftcards_mac_apps.png" alt="" /></figure>
    <figure class="card_1"><img src="http://images.apple.com/itunes/home/images/giftcards_books.png" alt="" /></figure>
    <figure class="card_2"><img src="http://images.apple.com/itunes/home/images/giftcards_ios_apps.png" alt="" /></figure>
    <figure class="card_3"><img src="http://images.apple.com/itunes/home/images/giftcards_music.png" alt="" /></figure>
  </div>
  
</div>
            
          
!

↑ Insert the most common viewport meta tag

CSS

            
              
// PROMO
// ========================================
.promo

  .gift-cards
    height: 400px
    width: 300px
    margin: 0 auto
    +perspective(800px)
    +perspective-origin(50% -40%)
    +transform-style(preserve-3d)
    
  figure
    position: absolute
    left: 50%
    width: 218px
    margin-left: -109px
    
    //+transition( all .9s ease-in-out) // smooth
    +transition( all 0.6s cubic-bezier(0.94,-1.5,0.29,1.7)) // Snappy
    +transform( translate3d( 0, 20px, 0) )
  
  //Position cards in 3d space
  $numCards: 4
  $xOffset: -45px
  $zOffset: 50px
  $rotOffset: -12deg
  
  @for $i from 1 to $numCards

    .card_#{$i} 
      +transform( translate3d(($xOffset * $i), 20px, ($zOffset * $i )) rotate3d(0, 1, 0, $rotOffset * $i)  )
      
    //.gift-cards:hover
      //.card_#{$i} 
        //+transform( translate3d(($xOffset * $i), 20px, ($zOffset * $i )) rotate3d(0, 1, 0, $rotOffset * $i)  )
  
 
            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
              
            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................