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);
}
}See Also:
Minimal Client-side Table Sorting Library – tableSortable.js
Two-column Table Data Comparison Using JavaScript and CSS3
A Pure CSS3 Content Slideshow
Easily Convert and Validate Naming Conventions with Convconv
Minimal Dynamic Modal Dialog JavaScript Library – sv-modal
Minimalist Text Typing Effect In Pure JavaScript – Typeit.js
CSS Only Circular Reading Progress Indicator
Block Dev Tools, Right-Click & Text Selection with PageProtector.js Library