JSFiddle - React, Tailwind, and code Playground

by Laurent Dufour

HTML

<h1>Bonnetau Of Snake Family</h1>
        <div class="container">
            <div class="cards">
                <div class="card" onclick="flip(event)">
                    <div class="front">
                        <img class="card-img" src="http://media.syracuse.com/entertainment/photo/11359273-small.jpg" width="200">                
                    </div> 
                    <div class="back"></div>
                </div>
                <div class="card" onclick="flip(event)">
                    <div class="front">
                        <img class="card-img" src="http://media.syracuse.com/entertainment/photo/11359273-small.jpg" width="200">                
                    </div> 
                    <div class="back"></div>
                </div> 
                <div class="card" onclick="flip(event)">
                    <div class="front">
                        <img class="card-img" src="http://media.syracuse.com/entertainment/photo/11359273-small.jpg" width="200">                
                    </div> 
                    <div class="back"></div>
                </div>  
                <div class="card" onclick="flip(event)">
                    <div class="front">
                        <img class="card-img" src="http://media.syracuse.com/entertainment/photo/11359273-small.jpg" width="200">                
                    </div> 
                    <div class="back"></div>
                </div> 
                <div class="card" onclick="flip(event)">
                    <div class="front">
                        <img class="card-img" src="http://media.syracuse.com/entertainment/photo/11359273-small.jpg" width="200">                
                    </div> 
                    <div class="back"></div>
                </div>                 
            </div>            
        </div>

CSS

body{
    text-align: center;
    margin: 0;
    min-height: 100vh;
    background-image: url("../images/fond.png");
    background-position: center center;
    background-size: cover;
    animation-name: back;
    animation-duration: 20s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
}
@keyframes back {
    0%{background-size: 100% auto;}
    50%{background-size: 120% auto;}
    100%{background-size: 100% auto;}
}
h1 {
    font-size: 100px;
    margin: 0;
    padding: 20px;
    border-bottom: solid 1px 
rgba(255,255,255,0.4);
    color: 
black;
    background-color: 
rgba(0, 0, 0, 0.2);
}
div.container {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}
div.cards {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    margin: 5%;
    perspective: 1000px;
}
div.card {
    transition: 1s;
    width: 200px;
    height: 300px;
    margin: 10px;
    transform-style: preserve-3d;
}

.front, .back {
    position: absolute;
    backface-visibility: hidden;
    height: 200px;
}
.front {
    background: url(http://media.syracuse.com/entertainment/photo/11359273-small.jpg);
    background-size: 00px;
    width: 200px;
    transform: rotateY(180deg);
}
.back {
    background: url(http://www.ibike.org/images/history/bicycleplayingcard01.jpg);
    background-size: 200px;
    width: 200px;
}
.back:hover {
    transition: 0.3s;
    box-shadow: 0px 0px 20px 3px 
#000;
}

JavaScript

function flip(event){
    let element = event.currentTarget;
    if (element.className === "card"){
        if(element.style.transform == "rotateY(180deg)"){
            element.style.transform = "rotateY(0deg)";
        }
        else{
            element.style.transform = "rotateY(180deg)";
        }
    }
}
let redcard = 0

shuffle()

function shuffle() {
    let allcards = Array.from(document.getElementsByClassName("card-img"));
    console.log(allcards);
    let random = Math.floor(Math.random() * allcards.length);
    allcards[random].setAttribute('src', "http://r.ddmcdn.com/s_f/o_1/cx_86/cy_0/cw_434/ch_434/w_162/APL/uploads/2014/06/10-kitten-cuteness-1.jpg");
    allcards.splice(random,1);
    console.log(allcards);
    random = Math.floor(Math.random() * allcards.length);
    allcards[random].setAttribute('src', "http://r.ddmcdn.com/s_f/o_1/cx_86/cy_0/cw_434/ch_434/w_162/APL/uploads/2014/06/10-kitten-cuteness-1.jpg");
}