|
Сообщение от DVV
|
|
не понял такого подхода.
|
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
* { margin: 0; padding: 0; }
.container {
margin: 20px auto;
position: relative;
display : flex;
flex-wrap: wrap;
justify-content: space-around;
perspective: 600px;
}
.card {
width: 120px;
height: 180px;
margin: 8px;
transition: transform 0.5s 0.5s;
transform-style: preserve-3d;
}
.card.flip{
transform: rotateY( 180deg );
transition-delay: 0s;
}
figure {
background-size: contain;
background-repeat: no-repeat;
width: 100%;
height: 100%;
position: absolute;
display: block;
backface-visibility: hidden;
}
.back {
background-image: url(http://www.xiper.net/examples/html-and-css-tricks/effects/card-back.png);
}
.front {
background-image: url(http://www.xiper.net/examples/html-and-css-tricks/effects/card-front.png);
transform: rotateY( 180deg );
}
</style>
<script>
document.addEventListener("DOMContentLoaded", () => {
let cardItems = [...document.querySelectorAll('.card')], current, timer;
cardItems.forEach(card => card.addEventListener('click', () => {
clearTimeout(timer);
if(current) current.classList.remove('flip');// тут должна быть проверка на совпадение
timer = setTimeout(()=> card.classList.remove('flip'), 1500);
card.classList.add('flip');
current = card;
}))
})
</script>
</head>
<body>
<div class="container" id="container">
<div class="card">
<figure class="back"></figure>
<figure class="front"></figure>
</div>
<div class="card">
<figure class="back"></figure>
<figure class="front"></figure>
</div>
<div class="card">
<figure class="back"></figure>
<figure class="front"></figure>
</div>
<div class="card">
<figure class="back"></figure>
<figure class="front"></figure>
</div>
<div class="card">
<figure class="back"></figure>
<figure class="front"></figure>
</div>
<div class="card">
<figure class="back"></figure>
<figure class="front"></figure>
</div>
<div class="card">
<figure class="back"></figure>
<figure class="front"></figure>
</div>
<div class="card">
<figure class="back"></figure>
<figure class="front"></figure>
</div>
<div class="card">
<figure class="back"></figure>
<figure class="front"></figure>
</div>
<div class="card">
<figure class="back"></figure>
<figure class="front"></figure>
</div>
<div class="card">
<figure class="back"></figure>
<figure class="front"></figure>
</div>
<div class="card">
<figure class="back"></figure>
<figure class="front"></figure>
</div>
</div>
</body>
</html>