Transition des cartes

1 year ago · 81689755a5
parent 1a391d93d5
commit 81689755a5
2 changed files with 19 additions and 8 deletions
--- a/Project/php/css/memory.css
+++ b/Project/php/css/memory.css
@ -6,6 +6,7 @@ body {
    background-color: #f0f0f0;
    margin-left: 15vh;
    margin-right: 15vh;
+    overflow: hidden;
 }

 #memory-game {
@ -14,6 +15,7 @@ body {
    grid-template-rows: repeat(4, minmax(0, 1fr));
    gap: 10px;
    margin: auto;
+    perspective: 1000px;
 }

 .card {
@ -27,15 +29,22 @@ body {
    align-items: center;
    font-size: 18px;
    cursor: pointer;
-    transition: background-color 0.3s ease;
+    transition: transform 0.6s ease;
+    transform-style: preserve-3d;
    min-height: 10vh;
    min-width: 20vh;
    aspect-ratio: 1/1;
 }

+.card span {
+    backface-visibility: hidden;
+}
+
+
 .flipped {
    background: url("../assets/img/carte.png") no-repeat scroll center;
    background-size: cover;
+    transform: rotateY(180deg);
 }

 .flipped>span{
--- a/Project/php/templates/memory.html
+++ b/Project/php/templates/memory.html
@ -7,15 +7,17 @@
    <link rel="stylesheet" href="{{base}}/css/memory.css">
 </head>
 <body>
-<div id="memory-game">
+<div>
+    <h1>Memory Game : {{ nameVoc }}</h1>
+    <div id="memory-game">
        {% for word in wordShuffle %}
        <div class="card center-text flipped" data-word="{{ word }}">
            <span>{{ word }}</span>
        </div>
        {% endfor %}
+    </div>
 </div>

-
 <script>
    var pairs = JSON.parse('{{ pairs | raw }}');
 </script>