Impresionante imagen Slice Flip animación usando Pure CSS/CSS3

Vista prévia

Descripción

Un enfoque CSS puro para crear un efecto de transición de giro de corte fresco entre dos imágenes. Basado en : antes de & : después de selectores y varias propiedades de animación CSS3.

Funcionamiento

Estructura HTML de marcado.

<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>

Añade imágenes a tu página web.

.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);
}

Las reglas principales de CSS/CSS3 para los sectores.

.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;
}

Crea la animación Flip usando 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);
}
}