Flexbox 3D Gallery

HTML
<div class="wrapper"> <div class="container"> <div class="image"></div> </div> <div class="container"> <div class="image"></div> </div> <div class="container"> <div class="image"></div> </div> <div class="container"> <div class="image"></div> </div> <div class="container"> <div class="image"></div> </div> <div class="container"> <div class="image"></div> </div> <div class="container"> <div class="image"></div> </div> <div class="container"> <div class="image"></div> </div> <div class="container"> <div class="image"></div> </div> <div class="container"> <div class="image"></div> </div> <div class="container"> <div class="image"></div> </div> <div class="container"> <div class="image"></div> </div> <div class="container"> <div class="image"></div> </div> <div class="container"> <div class="image"></div> </div> <div class="container"> <div class="image"></div> </div> <div class="container"> <div class="image"></div> </div> <div class="container"> <div class="image"></div> </div> <div class="container"> <div class="image"></div> </div> <div class="container"> <div class="image"></div> </div> <div class="container"> <div class="image"></div> </div> </div>
SCSS
.wrapper { display: flex; flex-flow: row wrap; overflow: hidden; perspective: 800px; } .container { width: 20%; } .image { width: 100%; padding-top: 100%; background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/242518/trump.png); background-size: cover; transform: scale(4, 4) translate(1000%, 100%) rotate3d(8, -4, 8, 90deg); opacity: 0; transition: 0.25s ease opacity; } .image.-animate { opacity: 1; transform: scale(1, 1) translate(0, 0) rotate3d(0, 0, 0, 90deg); animation: 0.95s ease gallery; transition: 0.5s ease opacity; } @keyframes gallery { 0% { transform: scale(4, 4) translate(1000%, 100%) rotate3d(8, -4, 8, 90deg); } 100% { transform: scale(1, 1) translate(0, 0) rotate3d(0, 0, 0, 90deg); } }
JAVASCRIPT
$('.image').each(function(index, value) { setTimeout(function() { $(value).addClass('-animate'); }, 125 * index); });
Expand for more options Login