JSFiddle - React, Tailwind, and code Playground
HTML
<div class="card_container">
<div class="spinner"></div>
</div>
CSS
.spinner {
position: absolute;
top: 0;
left: 0;
height: 300px;
width: 600px;
animation: 5s rotate linear infinite;
-moz-animation: 5s rotate linear infinite;
background-size: cover;
transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
}
@keyframes rotate {
0% {
transform: rotateY(90deg);
}
0%, 33.33% {
background: url('http://media.indiatimes.in/media/content/2015/Apr/adidas-wiki_1428491439_725x725.jpg');
}
33.33% {
transform: rotateY(-90deg);
}
33.34%, 66.68% {
background: url('http://slodive.com/wp-content/uploads/2013/02/popular-logos/puma-logo.jpg');
}
66.68% {
transform: rotateY(90deg);
}
66.69%, 100% {
background:...