CodePen

HTML

            
              <html>
	<head>
		<title></title>
		<meta http-equiv="content-type" content="text/html; charset=utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0">
		<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
		<script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
		<script type="text/javascript" src="http://ricostacruz.com/jquery.transit/jquery.transit.min.js" ></script>
	</head>
	<body>
    <h2>Click here to start animation</h2>
    <div class="phone">
    <img src="http://imgs.abduzeedo.com/files/tutorials/basic-anim-css/n5.png" width="640" />
		<section>
			<ul>
				<li></li>
				<li></li>
				<li></li>
				<li></li>
				<li></li>
				<li></li>
				<li></li>
        <li></li>
				<li></li>
				<li></li>
				<li></li>
				<li></li>
				<li></li>
				<li></li>
			</ul>
		</section>
    </div>
	</body>
</html>
            
          
!

CSS

            
              body{
				padding: 0;
				margin: 0;
				background: #000;
			}
			body img{
				display: block;
				position: relative;
			}
h2{
  color:#fff;
  padding: 0 20px;
  font-family: sans-serif;
}
			section{
				background: url(http://imgs.abduzeedo.com/files/wallpapers/wpw279/wp_iPhone.jpg) center center;
				background-size: cover;
				margin: 0 auto;
				position: absolute;
				background-size: cover;
				margin: 0 auto;
				position: absolute;
				top: 185px;
				left: 153px;
				width: 361px;
				height: 641px;
        overflow:hidden;
			}
			ul, ul li{
				margin:0;
				padding: 0;
				list-style-type: none;
			}
			ul {
				padding-top: 40px;
			}
			ul li{
				background: #fff;
				margin: 0 11px 1px 11px;
				padding: 15px;
        height:30px;
			}

.phone{
  position:relative;
}
            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
              $(function(){
  buildlist();
  $("h2").click(function(){
  buildlist();
  })
})

function buildlist(){
   $("ul li").css({opacity:0}).each(function(i){
    $(this).css({y:"150px", rotateX: "90deg", transformOrigin: 'center top'}).transition({perspective: '400px',y:"0", opacity:1, rotateX:"0deg", delay:100 * i},300, "ease");
  })   
}
            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................