Salut !

Je cherche à changer des cards de face avec un bouton radio un peu comme sur ce lien :

https://codyhouse.co/demo/pricing-tables/index.html

Pour le moment j'arrive à quelques chose quand le responsive est en dessous des 62 rem (mon point cassure mobile) mais le résultat n'est pas convainquant au dessus quand la paire de card n'est plus en column mais en row:/ le point de pivot reste central et du coup la rotation ne sera plus la même... En faite j'aimerais que les points de pivots soient toujours sur les cards qu'ils passent en column ou en row
Donc voici le code (mobile first)

Un autre souci avec ce code c'est qu'avec les positions absolutes, ca casse un peu mon code et du coup à partir de la div "flap" les éléments ne sont plus dans la section "flip", ce qui génère des défaut dans mon code de base, notament pour mon footer... Du coup j'aimerais savoir comment je peux faire pour garder les position "absolute" qui font que les éléments tournes, tout en gardant un page bien contruite avec ma partie card et en dessous mon footer

Merci d'avance


Code HTML : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
<form>
            <div class="radio-group">
                <input type="radio" id="option-one" name="selector" checked><label for="option-one">Mensuel</label><input type="radio" id="option-two" name="selector"><label for="option-two">Annuel</label>
            </div>
        </form>
<section class='flip abo'>
        <div id='flap' class='flap'>
            <div class="recto">
                <div class="card">
                    <h4 class='title-free'>Freelance</h4>
                    <div class='prix'>
                        <p>€</p>
                        <p class='free'><span>5</span>/mois</p>
                    </div>
                    <p class='bg-card'>1 utilisateur</p>
                    <p>Invités illimités</p>
                    <p class='bg-card'>Projets illimités</p>
                    <p>Un tableau Kanban/projet</p>
                    <p class='bg-card'>Tâches illimitées</p>
                    <p>Paiement des factures en ligne</p>
                    <p class='bg-card'>Support 5j/7</p>
                </div>
                <div class="card">
                    <h4 class='title-team'>Team</h4>
                    <div class='prix'>
                        <p>€</p>
                        <p class='team'>à partir de <span>9</span>/mois</p>
                    </div>
                    <p class='bg-card'>2 à 150 utilisateurs</p>
                    <p>Invités illimités</p>
                    <p class='bg-card'>Projets illimités</p>
                    <p>Un tableau Kanban/projet</p>
                    <p class='bg-card'>Tâches illimitées</p>
                    <p>Paiement des factures en ligne</p>
                    <p class='bg-card'>Support 5j/7</p>
                </div>
            </div>
            <div class="verso">
                <div class="card">
                    <h4 class='title-free'>Freelance</h4>
                    <div class='prix'>
                        <p>€</p>
                        <p class='free'><span>55</span>/ans</p>
                    </div>
                    <p class='bg-card'>1 utilisateur</p>
                    <p>Invités illimités</p>
                    <p class='bg-card'>Projets illimités</p>
                    <p>Un tableau Kanban/projet</p>
                    <p class='bg-card'>Tâches illimitées</p>
                    <p>Paiement des factures en ligne</p>
                    <p class='bg-card'>Support 5j/7</p>
                </div>
                <div class="card">
                    <h4 class='title-team'>Team</h4>
                    <div class='prix'>
                        <p>€</p>
                        <p class='team'>à partir de <span>99</span>/ans</p>
                    </div>
                    <p class='bg-card'>2 à 150 utilisateurs</p>
                    <p>Invités illimités</p>
                    <p class='bg-card'>Projets illimités</p>
                    <p>Un tableau Kanban/projet</p>
                    <p class='bg-card'>Tâches illimitées</p>
                    <p>Paiement des factures en ligne</p>
                    <p class='bg-card'>Support 5j/7</p>
                </div>
            </div>
        </div>
    </section>

Code CSS : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
 
 
.flap{<br>    display: flex;<br>    flex-direction: column;<br>    align-item:center;<br>    position: absolute;
    transform-style: preserve-3d;
    transition: transform 1s;
}
.recto,
.verso{
    display: block;
    position: absolute;
    backface-visibility: hidden;
}
.verso{
    transform: rotateY(180deg);
}
.flap.flipped{
    transform: rotateY(-180deg);
}
.abo{
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 1rem;
}
.card{
    box-shadow: 0 3px 6px #00000029;
    margin: 1rem 0;
    border: 0px;
    border-radius: 0;
    align-items: center;
    padding-top: 1rem;<br>    min-width: auto;<br>}
.bg-card{
    width: 100%;
    background: rgb(220, 204, 255, 0.26);
    text-align: center;
}
 
.radio-group input[type=radio] {
    position: absolute;
    visibility: hidden;
    display: none;
}
.radio-group label {
    color: $wht;
    display: inline-block;
    cursor: pointer;
    font-weight: bold;
    padding: 10px 20px;
    margin: 0;
    background: $ppl;
    min-width: 106px;
}
input[type=radio]:checked + label{
    color: $ppl;
    background: $wht;
}
.radio-group {
    border: solid 1px $ppl;
    display: inline-block;
    margin: 20px;
    border-radius: 50px;
    overflow: hidden;
}

Code JavaScript : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
const flop = document.getElementById('flap');
document.getElementById('option-one').addEventListener('change', function(){
    flop.classList.toggle('flipped');
}, false);
document.getElementById('option-two').addEventListener('change', function(){
    flop.classList.toggle('flipped');
}, false);