Author: | baileyparker |
---|---|
Views Total: | 964 views |
Official Page: | Go to website |
Last Update: | December 18, 2015 |
License: | MIT |
Preview:

Description:
A pure CSS approach to creating a cool slice flip transition effect between two images. Based on :before
& :after
selectors and several CSS3 animation properties.
How to use it:
Markup html structure.
<div class="tileable-image"> <div class="tileable-image-tile"></div> <div class="tileable-image-tile"></div> <div class="tileable-image-tile"></div> <div class="tileable-image-tile"></div> <div class="tileable-image-tile"></div> <div class="tileable-image-tile"></div> <div class="tileable-image-tile"></div> <div class="tileable-image-tile"></div> <div class="tileable-image-tile"></div> <div class="tileable-image-tile"></div> <div class="tileable-image-tile"></div> <div class="tileable-image-tile"></div> <div class="tileable-image-tile"></div> <div class="tileable-image-tile"></div> <div class="tileable-image-tile"></div> <div class="tileable-image-tile"></div> <div class="tileable-image-tile"></div> <div class="tileable-image-tile"></div> <div class="tileable-image-tile"></div> <div class="tileable-image-tile"></div> <div class="tileable-image-tile"></div> <div class="tileable-image-tile"></div> <div class="tileable-image-tile"></div> <div class="tileable-image-tile"></div> <div class="tileable-image-tile"></div> <div class="tileable-image-tile"></div> <div class="tileable-image-tile"></div> <div class="tileable-image-tile"></div> <div class="tileable-image-tile"></div> <div class="tileable-image-tile"></div> <div class="tileable-image-tile"></div> <div class="tileable-image-tile"></div> <div class="tileable-image-tile"></div> <div class="tileable-image-tile"></div> <div class="tileable-image-tile"></div> <div class="tileable-image-tile"></div> <div class="tileable-image-tile"></div> <div class="tileable-image-tile"></div> <div class="tileable-image-tile"></div> <div class="tileable-image-tile"></div> <div class="tileable-image-tile"></div> <div class="tileable-image-tile"></div> <div class="tileable-image-tile"></div> <div class="tileable-image-tile"></div> <div class="tileable-image-tile"></div> <div class="tileable-image-tile"></div> <div class="tileable-image-tile"></div> <div class="tileable-image-tile"></div> </div>
Add images to your webpage.
.tileable-image { width: 650px; height: 434px; -webkit-perspective: 1000px; perspective: 1000px; } .tileable-image-tile { float: left; position: relative; } .tileable-image-tile, .tileable-image-tile:before, .tileable-image-tile:after { width: 81.25px; height: 72.33333px; } .tileable-image-tile:before, .tileable-image-tile:after { -webkit-backface-visibility: hidden; backface-visibility: hidden; content: ' '; display: block; left: 0; position: absolute; top: 0; } .tileable-image-tile:before { background: url("1.png") 0 0; } .tileable-image-tile:after { background: url("2.jpg") 0 0 ; -webkit-transform: rotateY(180deg); transform: rotateY(180deg); }
The primary CSS / CSS3 rules for the slices.
.tileable-image-tile:nth-child(1):before, .tileable-image-tile:nth-child(1):after { background-position: 0px 0px; } .tileable-image-tile:nth-child(1):before { -webkit-animation: 0.5s linear 0.5s 1 alternate forwards flip-front; animation: 0.5s linear 0.5s 1 alternate forwards flip-front; } .tileable-image-tile:nth-child(1):after { -webkit-animation: 0.5s linear 0.5s 1 alternate forwards flip-back; animation: 0.5s linear 0.5s 1 alternate forwards flip-back; } .tileable-image-tile:nth-child(2):before, .tileable-image-tile:nth-child(2):after { background-position: -81.25px 0px; } .tileable-image-tile:nth-child(2):before { -webkit-animation: 0.5s linear 0.6s 1 alternate forwards flip-front; animation: 0.5s linear 0.6s 1 alternate forwards flip-front; } .tileable-image-tile:nth-child(2):after { -webkit-animation: 0.5s linear 0.6s 1 alternate forwards flip-back; animation: 0.5s linear 0.6s 1 alternate forwards flip-back; } .tileable-image-tile:nth-child(3):before, .tileable-image-tile:nth-child(3):after { background-position: -162.5px 0px; } .tileable-image-tile:nth-child(3):before { -webkit-animation: 0.5s linear 0.7s 1 alternate forwards flip-front; animation: 0.5s linear 0.7s 1 alternate forwards flip-front; } .tileable-image-tile:nth-child(3):after { -webkit-animation: 0.5s linear 0.7s 1 alternate forwards flip-back; animation: 0.5s linear 0.7s 1 alternate forwards flip-back; } .tileable-image-tile:nth-child(4):before, .tileable-image-tile:nth-child(4):after { background-position: -243.75px 0px; } .tileable-image-tile:nth-child(4):before { -webkit-animation: 0.5s linear 0.8s 1 alternate forwards flip-front; animation: 0.5s linear 0.8s 1 alternate forwards flip-front; } .tileable-image-tile:nth-child(4):after { -webkit-animation: 0.5s linear 0.8s 1 alternate forwards flip-back; animation: 0.5s linear 0.8s 1 alternate forwards flip-back; } .tileable-image-tile:nth-child(5):before, .tileable-image-tile:nth-child(5):after { background-position: -325px 0px; } .tileable-image-tile:nth-child(5):before { -webkit-animation: 0.5s linear 0.9s 1 alternate forwards flip-front; animation: 0.5s linear 0.9s 1 alternate forwards flip-front; } .tileable-image-tile:nth-child(5):after { -webkit-animation: 0.5s linear 0.9s 1 alternate forwards flip-back; animation: 0.5s linear 0.9s 1 alternate forwards flip-back; } .tileable-image-tile:nth-child(6):before, .tileable-image-tile:nth-child(6):after { background-position: -406.25px 0px; } .tileable-image-tile:nth-child(6):before { -webkit-animation: 0.5s linear 1s 1 alternate forwards flip-front; animation: 0.5s linear 1s 1 alternate forwards flip-front; } .tileable-image-tile:nth-child(6):after { -webkit-animation: 0.5s linear 1s 1 alternate forwards flip-back; animation: 0.5s linear 1s 1 alternate forwards flip-back; } .tileable-image-tile:nth-child(7):before, .tileable-image-tile:nth-child(7):after { background-position: -487.5px 0px; } .tileable-image-tile:nth-child(7):before { -webkit-animation: 0.5s linear 1.1s 1 alternate forwards flip-front; animation: 0.5s linear 1.1s 1 alternate forwards flip-front; } .tileable-image-tile:nth-child(7):after { -webkit-animation: 0.5s linear 1.1s 1 alternate forwards flip-back; animation: 0.5s linear 1.1s 1 alternate forwards flip-back; } .tileable-image-tile:nth-child(8):before, .tileable-image-tile:nth-child(8):after { background-position: -568.75px 0px; } .tileable-image-tile:nth-child(8):before { -webkit-animation: 0.5s linear 1.2s 1 alternate forwards flip-front; animation: 0.5s linear 1.2s 1 alternate forwards flip-front; } .tileable-image-tile:nth-child(8):after { -webkit-animation: 0.5s linear 1.2s 1 alternate forwards flip-back; animation: 0.5s linear 1.2s 1 alternate forwards flip-back; } .tileable-image-tile:nth-child(9):before, .tileable-image-tile:nth-child(9):after { background-position: 0px -72.33333px; } .tileable-image-tile:nth-child(9):before { -webkit-animation: 0.5s linear 0.6s 1 alternate forwards flip-front; animation: 0.5s linear 0.6s 1 alternate forwards flip-front; } .tileable-image-tile:nth-child(9):after { -webkit-animation: 0.5s linear 0.6s 1 alternate forwards flip-back; animation: 0.5s linear 0.6s 1 alternate forwards flip-back; } .tileable-image-tile:nth-child(10):before, .tileable-image-tile:nth-child(10):after { background-position: -81.25px -72.33333px; } .tileable-image-tile:nth-child(10):before { -webkit-animation: 0.5s linear 0.7s 1 alternate forwards flip-front; animation: 0.5s linear 0.7s 1 alternate forwards flip-front; } .tileable-image-tile:nth-child(10):after { -webkit-animation: 0.5s linear 0.7s 1 alternate forwards flip-back; animation: 0.5s linear 0.7s 1 alternate forwards flip-back; } .tileable-image-tile:nth-child(11):before, .tileable-image-tile:nth-child(11):after { background-position: -162.5px -72.33333px; } .tileable-image-tile:nth-child(11):before { -webkit-animation: 0.5s linear 0.8s 1 alternate forwards flip-front; animation: 0.5s linear 0.8s 1 alternate forwards flip-front; } .tileable-image-tile:nth-child(11):after { -webkit-animation: 0.5s linear 0.8s 1 alternate forwards flip-back; animation: 0.5s linear 0.8s 1 alternate forwards flip-back; } .tileable-image-tile:nth-child(12):before, .tileable-image-tile:nth-child(12):after { background-position: -243.75px -72.33333px; } .tileable-image-tile:nth-child(12):before { -webkit-animation: 0.5s linear 0.9s 1 alternate forwards flip-front; animation: 0.5s linear 0.9s 1 alternate forwards flip-front; } .tileable-image-tile:nth-child(12):after { -webkit-animation: 0.5s linear 0.9s 1 alternate forwards flip-back; animation: 0.5s linear 0.9s 1 alternate forwards flip-back; } .tileable-image-tile:nth-child(13):before, .tileable-image-tile:nth-child(13):after { background-position: -325px -72.33333px; } .tileable-image-tile:nth-child(13):before { -webkit-animation: 0.5s linear 1s 1 alternate forwards flip-front; animation: 0.5s linear 1s 1 alternate forwards flip-front; } .tileable-image-tile:nth-child(13):after { -webkit-animation: 0.5s linear 1s 1 alternate forwards flip-back; animation: 0.5s linear 1s 1 alternate forwards flip-back; } .tileable-image-tile:nth-child(14):before, .tileable-image-tile:nth-child(14):after { background-position: -406.25px -72.33333px; } .tileable-image-tile:nth-child(14):before { -webkit-animation: 0.5s linear 1.1s 1 alternate forwards flip-front; animation: 0.5s linear 1.1s 1 alternate forwards flip-front; } .tileable-image-tile:nth-child(14):after { -webkit-animation: 0.5s linear 1.1s 1 alternate forwards flip-back; animation: 0.5s linear 1.1s 1 alternate forwards flip-back; } .tileable-image-tile:nth-child(15):before, .tileable-image-tile:nth-child(15):after { background-position: -487.5px -72.33333px; } .tileable-image-tile:nth-child(15):before { -webkit-animation: 0.5s linear 1.2s 1 alternate forwards flip-front; animation: 0.5s linear 1.2s 1 alternate forwards flip-front; } .tileable-image-tile:nth-child(15):after { -webkit-animation: 0.5s linear 1.2s 1 alternate forwards flip-back; animation: 0.5s linear 1.2s 1 alternate forwards flip-back; } .tileable-image-tile:nth-child(16):before, .tileable-image-tile:nth-child(16):after { background-position: -568.75px -72.33333px; } .tileable-image-tile:nth-child(16):before { -webkit-animation: 0.5s linear 1.3s 1 alternate forwards flip-front; animation: 0.5s linear 1.3s 1 alternate forwards flip-front; } .tileable-image-tile:nth-child(16):after { -webkit-animation: 0.5s linear 1.3s 1 alternate forwards flip-back; animation: 0.5s linear 1.3s 1 alternate forwards flip-back; } .tileable-image-tile:nth-child(17):before, .tileable-image-tile:nth-child(17):after { background-position: 0px -144.66667px; } .tileable-image-tile:nth-child(17):before { -webkit-animation: 0.5s linear 0.7s 1 alternate forwards flip-front; animation: 0.5s linear 0.7s 1 alternate forwards flip-front; } .tileable-image-tile:nth-child(17):after { -webkit-animation: 0.5s linear 0.7s 1 alternate forwards flip-back; animation: 0.5s linear 0.7s 1 alternate forwards flip-back; } .tileable-image-tile:nth-child(18):before, .tileable-image-tile:nth-child(18):after { background-position: -81.25px -144.66667px; } .tileable-image-tile:nth-child(18):before { -webkit-animation: 0.5s linear 0.8s 1 alternate forwards flip-front; animation: 0.5s linear 0.8s 1 alternate forwards flip-front; } .tileable-image-tile:nth-child(18):after { -webkit-animation: 0.5s linear 0.8s 1 alternate forwards flip-back; animation: 0.5s linear 0.8s 1 alternate forwards flip-back; } .tileable-image-tile:nth-child(19):before, .tileable-image-tile:nth-child(19):after { background-position: -162.5px -144.66667px; } .tileable-image-tile:nth-child(19):before { -webkit-animation: 0.5s linear 0.9s 1 alternate forwards flip-front; animation: 0.5s linear 0.9s 1 alternate forwards flip-front; } .tileable-image-tile:nth-child(19):after { -webkit-animation: 0.5s linear 0.9s 1 alternate forwards flip-back; animation: 0.5s linear 0.9s 1 alternate forwards flip-back; } .tileable-image-tile:nth-child(20):before, .tileable-image-tile:nth-child(20):after { background-position: -243.75px -144.66667px; } .tileable-image-tile:nth-child(20):before { -webkit-animation: 0.5s linear 1s 1 alternate forwards flip-front; animation: 0.5s linear 1s 1 alternate forwards flip-front; } .tileable-image-tile:nth-child(20):after { -webkit-animation: 0.5s linear 1s 1 alternate forwards flip-back; animation: 0.5s linear 1s 1 alternate forwards flip-back; } .tileable-image-tile:nth-child(21):before, .tileable-image-tile:nth-child(21):after { background-position: -325px -144.66667px; } .tileable-image-tile:nth-child(21):before { -webkit-animation: 0.5s linear 1.1s 1 alternate forwards flip-front; animation: 0.5s linear 1.1s 1 alternate forwards flip-front; } .tileable-image-tile:nth-child(21):after { -webkit-animation: 0.5s linear 1.1s 1 alternate forwards flip-back; animation: 0.5s linear 1.1s 1 alternate forwards flip-back; } .tileable-image-tile:nth-child(22):before, .tileable-image-tile:nth-child(22):after { background-position: -406.25px -144.66667px; } .tileable-image-tile:nth-child(22):before { -webkit-animation: 0.5s linear 1.2s 1 alternate forwards flip-front; animation: 0.5s linear 1.2s 1 alternate forwards flip-front; } .tileable-image-tile:nth-child(22):after { -webkit-animation: 0.5s linear 1.2s 1 alternate forwards flip-back; animation: 0.5s linear 1.2s 1 alternate forwards flip-back; } .tileable-image-tile:nth-child(23):before, .tileable-image-tile:nth-child(23):after { background-position: -487.5px -144.66667px; } .tileable-image-tile:nth-child(23):before { -webkit-animation: 0.5s linear 1.3s 1 alternate forwards flip-front; animation: 0.5s linear 1.3s 1 alternate forwards flip-front; } .tileable-image-tile:nth-child(23):after { -webkit-animation: 0.5s linear 1.3s 1 alternate forwards flip-back; animation: 0.5s linear 1.3s 1 alternate forwards flip-back; } .tileable-image-tile:nth-child(24):before, .tileable-image-tile:nth-child(24):after { background-position: -568.75px -144.66667px; } .tileable-image-tile:nth-child(24):before { -webkit-animation: 0.5s linear 1.4s 1 alternate forwards flip-front; animation: 0.5s linear 1.4s 1 alternate forwards flip-front; } .tileable-image-tile:nth-child(24):after { -webkit-animation: 0.5s linear 1.4s 1 alternate forwards flip-back; animation: 0.5s linear 1.4s 1 alternate forwards flip-back; } .tileable-image-tile:nth-child(25):before, .tileable-image-tile:nth-child(25):after { background-position: 0px -217px; } .tileable-image-tile:nth-child(25):before { -webkit-animation: 0.5s linear 0.8s 1 alternate forwards flip-front; animation: 0.5s linear 0.8s 1 alternate forwards flip-front; } .tileable-image-tile:nth-child(25):after { -webkit-animation: 0.5s linear 0.8s 1 alternate forwards flip-back; animation: 0.5s linear 0.8s 1 alternate forwards flip-back; } .tileable-image-tile:nth-child(26):before, .tileable-image-tile:nth-child(26):after { background-position: -81.25px -217px; } .tileable-image-tile:nth-child(26):before { -webkit-animation: 0.5s linear 0.9s 1 alternate forwards flip-front; animation: 0.5s linear 0.9s 1 alternate forwards flip-front; } .tileable-image-tile:nth-child(26):after { -webkit-animation: 0.5s linear 0.9s 1 alternate forwards flip-back; animation: 0.5s linear 0.9s 1 alternate forwards flip-back; } .tileable-image-tile:nth-child(27):before, .tileable-image-tile:nth-child(27):after { background-position: -162.5px -217px; } .tileable-image-tile:nth-child(27):before { -webkit-animation: 0.5s linear 1s 1 alternate forwards flip-front; animation: 0.5s linear 1s 1 alternate forwards flip-front; } .tileable-image-tile:nth-child(27):after { -webkit-animation: 0.5s linear 1s 1 alternate forwards flip-back; animation: 0.5s linear 1s 1 alternate forwards flip-back; } .tileable-image-tile:nth-child(28):before, .tileable-image-tile:nth-child(28):after { background-position: -243.75px -217px; } .tileable-image-tile:nth-child(28):before { -webkit-animation: 0.5s linear 1.1s 1 alternate forwards flip-front; animation: 0.5s linear 1.1s 1 alternate forwards flip-front; } .tileable-image-tile:nth-child(28):after { -webkit-animation: 0.5s linear 1.1s 1 alternate forwards flip-back; animation: 0.5s linear 1.1s 1 alternate forwards flip-back; } .tileable-image-tile:nth-child(29):before, .tileable-image-tile:nth-child(29):after { background-position: -325px -217px; } .tileable-image-tile:nth-child(29):before { -webkit-animation: 0.5s linear 1.2s 1 alternate forwards flip-front; animation: 0.5s linear 1.2s 1 alternate forwards flip-front; } .tileable-image-tile:nth-child(29):after { -webkit-animation: 0.5s linear 1.2s 1 alternate forwards flip-back; animation: 0.5s linear 1.2s 1 alternate forwards flip-back; } .tileable-image-tile:nth-child(30):before, .tileable-image-tile:nth-child(30):after { background-position: -406.25px -217px; } .tileable-image-tile:nth-child(30):before { -webkit-animation: 0.5s linear 1.3s 1 alternate forwards flip-front; animation: 0.5s linear 1.3s 1 alternate forwards flip-front; } .tileable-image-tile:nth-child(30):after { -webkit-animation: 0.5s linear 1.3s 1 alternate forwards flip-back; animation: 0.5s linear 1.3s 1 alternate forwards flip-back; } .tileable-image-tile:nth-child(31):before, .tileable-image-tile:nth-child(31):after { background-position: -487.5px -217px; } .tileable-image-tile:nth-child(31):before { -webkit-animation: 0.5s linear 1.4s 1 alternate forwards flip-front; animation: 0.5s linear 1.4s 1 alternate forwards flip-front; } .tileable-image-tile:nth-child(31):after { -webkit-animation: 0.5s linear 1.4s 1 alternate forwards flip-back; animation: 0.5s linear 1.4s 1 alternate forwards flip-back; } .tileable-image-tile:nth-child(32):before, .tileable-image-tile:nth-child(32):after { background-position: -568.75px -217px; } .tileable-image-tile:nth-child(32):before { -webkit-animation: 0.5s linear 1.5s 1 alternate forwards flip-front; animation: 0.5s linear 1.5s 1 alternate forwards flip-front; } .tileable-image-tile:nth-child(32):after { -webkit-animation: 0.5s linear 1.5s 1 alternate forwards flip-back; animation: 0.5s linear 1.5s 1 alternate forwards flip-back; } .tileable-image-tile:nth-child(33):before, .tileable-image-tile:nth-child(33):after { background-position: 0px -289.33333px; } .tileable-image-tile:nth-child(33):before { -webkit-animation: 0.5s linear 0.9s 1 alternate forwards flip-front; animation: 0.5s linear 0.9s 1 alternate forwards flip-front; } .tileable-image-tile:nth-child(33):after { -webkit-animation: 0.5s linear 0.9s 1 alternate forwards flip-back; animation: 0.5s linear 0.9s 1 alternate forwards flip-back; } .tileable-image-tile:nth-child(34):before, .tileable-image-tile:nth-child(34):after { background-position: -81.25px -289.33333px; } .tileable-image-tile:nth-child(34):before { -webkit-animation: 0.5s linear 1s 1 alternate forwards flip-front; animation: 0.5s linear 1s 1 alternate forwards flip-front; } .tileable-image-tile:nth-child(34):after { -webkit-animation: 0.5s linear 1s 1 alternate forwards flip-back; animation: 0.5s linear 1s 1 alternate forwards flip-back; } .tileable-image-tile:nth-child(35):before, .tileable-image-tile:nth-child(35):after { background-position: -162.5px -289.33333px; } .tileable-image-tile:nth-child(35):before { -webkit-animation: 0.5s linear 1.1s 1 alternate forwards flip-front; animation: 0.5s linear 1.1s 1 alternate forwards flip-front; } .tileable-image-tile:nth-child(35):after { -webkit-animation: 0.5s linear 1.1s 1 alternate forwards flip-back; animation: 0.5s linear 1.1s 1 alternate forwards flip-back; } .tileable-image-tile:nth-child(36):before, .tileable-image-tile:nth-child(36):after { background-position: -243.75px -289.33333px; } .tileable-image-tile:nth-child(36):before { -webkit-animation: 0.5s linear 1.2s 1 alternate forwards flip-front; animation: 0.5s linear 1.2s 1 alternate forwards flip-front; } .tileable-image-tile:nth-child(36):after { -webkit-animation: 0.5s linear 1.2s 1 alternate forwards flip-back; animation: 0.5s linear 1.2s 1 alternate forwards flip-back; } .tileable-image-tile:nth-child(37):before, .tileable-image-tile:nth-child(37):after { background-position: -325px -289.33333px; } .tileable-image-tile:nth-child(37):before { -webkit-animation: 0.5s linear 1.3s 1 alternate forwards flip-front; animation: 0.5s linear 1.3s 1 alternate forwards flip-front; } .tileable-image-tile:nth-child(37):after { -webkit-animation: 0.5s linear 1.3s 1 alternate forwards flip-back; animation: 0.5s linear 1.3s 1 alternate forwards flip-back; } .tileable-image-tile:nth-child(38):before, .tileable-image-tile:nth-child(38):after { background-position: -406.25px -289.33333px; } .tileable-image-tile:nth-child(38):before { -webkit-animation: 0.5s linear 1.4s 1 alternate forwards flip-front; animation: 0.5s linear 1.4s 1 alternate forwards flip-front; } .tileable-image-tile:nth-child(38):after { -webkit-animation: 0.5s linear 1.4s 1 alternate forwards flip-back; animation: 0.5s linear 1.4s 1 alternate forwards flip-back; } .tileable-image-tile:nth-child(39):before, .tileable-image-tile:nth-child(39):after { background-position: -487.5px -289.33333px; } .tileable-image-tile:nth-child(39):before { -webkit-animation: 0.5s linear 1.5s 1 alternate forwards flip-front; animation: 0.5s linear 1.5s 1 alternate forwards flip-front; } .tileable-image-tile:nth-child(39):after { -webkit-animation: 0.5s linear 1.5s 1 alternate forwards flip-back; animation: 0.5s linear 1.5s 1 alternate forwards flip-back; } .tileable-image-tile:nth-child(40):before, .tileable-image-tile:nth-child(40):after { background-position: -568.75px -289.33333px; } .tileable-image-tile:nth-child(40):before { -webkit-animation: 0.5s linear 1.6s 1 alternate forwards flip-front; animation: 0.5s linear 1.6s 1 alternate forwards flip-front; } .tileable-image-tile:nth-child(40):after { -webkit-animation: 0.5s linear 1.6s 1 alternate forwards flip-back; animation: 0.5s linear 1.6s 1 alternate forwards flip-back; } .tileable-image-tile:nth-child(41):before, .tileable-image-tile:nth-child(41):after { background-position: 0px -361.66667px; } .tileable-image-tile:nth-child(41):before { -webkit-animation: 0.5s linear 1s 1 alternate forwards flip-front; animation: 0.5s linear 1s 1 alternate forwards flip-front; } .tileable-image-tile:nth-child(41):after { -webkit-animation: 0.5s linear 1s 1 alternate forwards flip-back; animation: 0.5s linear 1s 1 alternate forwards flip-back; } .tileable-image-tile:nth-child(42):before, .tileable-image-tile:nth-child(42):after { background-position: -81.25px -361.66667px; } .tileable-image-tile:nth-child(42):before { -webkit-animation: 0.5s linear 1.1s 1 alternate forwards flip-front; animation: 0.5s linear 1.1s 1 alternate forwards flip-front; } .tileable-image-tile:nth-child(42):after { -webkit-animation: 0.5s linear 1.1s 1 alternate forwards flip-back; animation: 0.5s linear 1.1s 1 alternate forwards flip-back; } .tileable-image-tile:nth-child(43):before, .tileable-image-tile:nth-child(43):after { background-position: -162.5px -361.66667px; } .tileable-image-tile:nth-child(43):before { -webkit-animation: 0.5s linear 1.2s 1 alternate forwards flip-front; animation: 0.5s linear 1.2s 1 alternate forwards flip-front; } .tileable-image-tile:nth-child(43):after { -webkit-animation: 0.5s linear 1.2s 1 alternate forwards flip-back; animation: 0.5s linear 1.2s 1 alternate forwards flip-back; } .tileable-image-tile:nth-child(44):before, .tileable-image-tile:nth-child(44):after { background-position: -243.75px -361.66667px; } .tileable-image-tile:nth-child(44):before { -webkit-animation: 0.5s linear 1.3s 1 alternate forwards flip-front; animation: 0.5s linear 1.3s 1 alternate forwards flip-front; } .tileable-image-tile:nth-child(44):after { -webkit-animation: 0.5s linear 1.3s 1 alternate forwards flip-back; animation: 0.5s linear 1.3s 1 alternate forwards flip-back; } .tileable-image-tile:nth-child(45):before, .tileable-image-tile:nth-child(45):after { background-position: -325px -361.66667px; } .tileable-image-tile:nth-child(45):before { -webkit-animation: 0.5s linear 1.4s 1 alternate forwards flip-front; animation: 0.5s linear 1.4s 1 alternate forwards flip-front; } .tileable-image-tile:nth-child(45):after { -webkit-animation: 0.5s linear 1.4s 1 alternate forwards flip-back; animation: 0.5s linear 1.4s 1 alternate forwards flip-back; } .tileable-image-tile:nth-child(46):before, .tileable-image-tile:nth-child(46):after { background-position: -406.25px -361.66667px; } .tileable-image-tile:nth-child(46):before { -webkit-animation: 0.5s linear 1.5s 1 alternate forwards flip-front; animation: 0.5s linear 1.5s 1 alternate forwards flip-front; } .tileable-image-tile:nth-child(46):after { -webkit-animation: 0.5s linear 1.5s 1 alternate forwards flip-back; animation: 0.5s linear 1.5s 1 alternate forwards flip-back; } .tileable-image-tile:nth-child(47):before, .tileable-image-tile:nth-child(47):after { background-position: -487.5px -361.66667px; } .tileable-image-tile:nth-child(47):before { -webkit-animation: 0.5s linear 1.6s 1 alternate forwards flip-front; animation: 0.5s linear 1.6s 1 alternate forwards flip-front; } .tileable-image-tile:nth-child(47):after { -webkit-animation: 0.5s linear 1.6s 1 alternate forwards flip-back; animation: 0.5s linear 1.6s 1 alternate forwards flip-back; } .tileable-image-tile:nth-child(48):before, .tileable-image-tile:nth-child(48):after { background-position: -568.75px -361.66667px; } .tileable-image-tile:nth-child(48):before { -webkit-animation: 0.5s linear 1.7s 1 alternate forwards flip-front; animation: 0.5s linear 1.7s 1 alternate forwards flip-front; } .tileable-image-tile:nth-child(48):after { -webkit-animation: 0.5s linear 1.7s 1 alternate forwards flip-back; animation: 0.5s linear 1.7s 1 alternate forwards flip-back; }
Create the flip animation using CSS3.
@-webkit-keyframes flip-front { from { -webkit-transform: rotateY(0deg); transform: rotateY(0deg); } to { -webkit-transform: rotateY(180deg); transform: rotateY(180deg); } } @keyframes flip-front { from { -webkit-transform: rotateY(0deg); transform: rotateY(0deg); } to { -webkit-transform: rotateY(180deg); transform: rotateY(180deg); } } @-webkit-keyframes flip-back { from { -webkit-transform: rotateY(180deg); transform: rotateY(180deg); } to { -webkit-transform: rotateY(0deg); transform: rotateY(0deg); } } @keyframes flip-back { from { -webkit-transform: rotateY(180deg); transform: rotateY(180deg); } to { -webkit-transform: rotateY(0deg); transform: rotateY(0deg); } }