antoine.jourdain
/
sae_2a_anglais
1
0
Fork 0
Code Issues 17 Pull Requests 1 Packages Projects 1 Releases Wiki Activity

Transition des cartes

Browse Source
php
Antoine JOURDAIN 1 year ago
parent 1a391d93d5
commit 81689755a5
2 changed files with 19 additions and 8 deletions
Show Stats Download Patch File Download Diff File

13
Project/php/css/memory.css
Unescape View File

@ -6,6 +6,7 @@ body {
background-color: #f0f0f0; background-color: #f0f0f0;
margin-left: 15vh; margin-left: 15vh;
margin-right: 15vh; margin-right: 15vh;
overflow: hidden;
} }
#memory-game { #memory-game {
@ -14,6 +15,7 @@ body {
grid-template-rows: repeat(4, minmax(0, 1fr)); grid-template-rows: repeat(4, minmax(0, 1fr));
gap: 10px; gap: 10px;
margin: auto; margin: auto;
perspective: 1000px;
} }
.card { .card {
@ -27,15 +29,22 @@ body {
align-items: center; align-items: center;
font-size: 18px; font-size: 18px;
cursor: pointer; cursor: pointer;
transition: background-color 0.3s ease; transition: transform 0.6s ease;
transform-style: preserve-3d;
min-height: 10vh; min-height: 10vh;
min-width: 20vh; min-width: 20vh;
aspect-ratio: 1/1; aspect-ratio: 1/1;
} }
.card span {
backface-visibility: hidden;
}
.flipped { .flipped {
background: url("../assets/img/carte.png") no-repeat scroll center; background: url("../assets/img/carte.png") no-repeat scroll center;
background-size: cover; background-size: cover;
transform: rotateY(180deg);
} }
.flipped>span{ .flipped>span{
@ -61,4 +70,4 @@ body {
.hidden { .hidden {
display: none; display: none;
} }

14
Project/php/templates/memory.html
Unescape View File

@ -7,15 +7,17 @@
<link rel="stylesheet" href="{{base}}/css/memory.css"> <link rel="stylesheet" href="{{base}}/css/memory.css">
</head> </head>
<body> <body>
<div id="memory-game"> <div>
{% for word in wordShuffle %} <h1>Memory Game : {{ nameVoc }}</h1>
<div class="card center-text flipped" data-word="{{ word }}"> <div id="memory-game">
<span>{{ word }}</span> {% for word in wordShuffle %}
<div class="card center-text flipped" data-word="{{ word }}">
<span>{{ word }}</span>
</div>
{% endfor %}
</div> </div>
{% endfor %}
</div> </div>
<script> <script>
var pairs = JSON.parse('{{ pairs | raw }}'); var pairs = JSON.parse('{{ pairs | raw }}');
</script> </script>

Write Preview
Loading…
Cancel
Save