.wrap
  .mobile
    #top.part
    .screen
      h1 My great App
      .features#box1
      .features#box2
      h1 They see me scrollin'
      .features#box3
      h1 They're likin'
      .features#box4
    #bottom.part
View Compiled
$screen: #2c3e50
$box1: #f1c40f
$box2: #e67e22
$box3: #d35400
$box4: #f39c12
$font: #ecf0f1
$primary: #7f8c8d
$secondary: #bdc3c7

@import url(https://fonts.googleapis.com/css?family=Source+Sans+Pro:600)

body
  background: #1abc9c
  color: $font
  font-family: 'Source Sans Pro'
  font-size: 20px

.wrap
  position: absolute
  left: 50%
  perspective-origin: 50%
  top: 50px
  transform: perspective(1600px) translateX(-150px)
  transform-style: preserve-3d

.mobile
  position: absolute
  transition: .5s ease-out .4s
  transform: rotateX(40deg)
  &:hover
    transition: .5s ease-out
    transform: rotateX(0deg)
  &:hover #bottom
    border-top: solid 0 $primary
    transition: .5s ease-out
		
.screen
  background: $screen
  background-size: cover
  height: 450px
  overflow-y: scroll
  padding: 20px
  width: 260px
  &::-webkit-scrollbar
    background: #2c3e50
    width: 10px
  &::-webkit-scrollbar-thumb
    background: #7f8c8d
  
  .features
    margin-bottom: 10px
    position: relative
    transform-origin: 50%
    transition: .2s ease-out
    &:hover
      transform: scale(1.05)
      box-shadow: 0 0 5px #2c3e50
  
  h1
    margin-bottom: 10px
  
  #box1
    background: $box1
    height: 80px
    
  #box2
    background: $box2
    height: 240px
    
  #box3
    background: $box3
    height: 100px
    
  #box4
    background: $box4
    height: 180px
    
.part
  background: $secondary
  border-radius: 25px 25px 0 0
  height: 50px
  width: 300px
  
#bottom
  border-top: solid 10px $primary
  transform: rotateX(180deg)
  transition: .5s ease-out .4s
  
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js