Je voudrais utiliser l'effet de retournement de carte dans ce article de blog pour un projet sur lequel je travaille. Cependant, je ne peux pas utiliser de valeurs fixes pour la largeur et la hauteur des cartes, car je dois tenir compte de différentes tailles d'écran.

Voici le code dans le post:

.flip-container {
    perspective: 1000px;
}
    /* flip the pane when hovered */
    .flip-container:hover .flipper, .flip-container.hover .flipper {
        transform: rotateY(180deg);
    }

.flip-container, .front, .back {
    width: 320px;
    height: 480px;
}

/* flip speed goes here */
.flipper {
    transition: 0.6s;
    transform-style: preserve-3d;

    position: relative;
}

/* hide back of pane during swap */
.front, .back {
    backface-visibility: hidden;

    position: absolute;
    top: 0;
    left: 0;
}

/* front pane, placed above back */
.front {
    z-index: 2;
    /* for firefox 31 */
    transform: rotateY(0deg);
}

/* back, initially hidden pane */
.back {
    transform: rotateY(180deg);
}

Ceci est un exemple de ce que je veux réaliser.

<div class="container">
    <div class="row">
        <div class="col">
            <div class="flip-container">
                <div class="flipper">
                    <div class="front">
                        <div class="inner">Front</div>
                    </div>
                    <div class="back">
                        <div class="inner">Back</div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col">
            <div class="flip-container">
                <div class="flipper">
                    <div class="front">
                        <div class="inner">Front</div>
                    </div>
                    <div class="back">
                        <div class="inner">Back</div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col">
            <div class="flip-container">
                <div class="flipper">
                    <div class="front">
                        <div class="inner">Front</div>
                    </div>
                    <div class="back">
                        <div class="inner">Back</div>
                    </div>
                </div>
            </div>

        </div>
        <div class="col">
            <div class="flip-container">
                <div class="flipper">
                    <div class="front">
                        <div class="inner">Front</div>
                    </div>
                    <div class="back">
                        <div class="inner">Back</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col">
            <div class="flip-container">
                <div class="flipper">
                    <div class="front">
                        <div class="inner">Front</div>
                    </div>
                    <div class="back">
                        <div class="inner">Back</div>
                    </div>
                </div>
            </div>

        </div>
        <div class="col">
            <div class="flip-container">
                <div class="flipper">
                    <div class="front">
                        <div class="inner">Front</div>
                    </div>
                    <div class="back">
                        <div class="inner">Back</div>
                    </div>
                </div>
            </div>

        </div>
        <div class="col">
            <div class="flip-container">
                <div class="flipper">
                    <div class="front">
                        <div class="inner">Front</div>
                    </div>
                    <div class="back">
                        <div class="inner">Back</div>
                    </div>
                </div>
            </div>

        </div>
        <div class="col">
            <div class="flip-container">
                <div class="flipper">
                    <div class="front">
                        <div class="inner">Front</div>
                    </div>
                    <div class="back">
                        <div class="inner">Back</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
0
Radwa Sherif 21 avril 2017 à 02:47

3 réponses

Meilleure réponse

Si je comprends bien, vous voulez que la flip-card soit réactive afin qu'elle gère ses effets sur tous les écrans sans se casser. Pour ce faire, vous devez utiliser les mesures en pourcentage plutôt qu'en pixels sur la largeur.

Donc, utiliser width: 100%; changera la mise en page à 100% de cet élément en fonction de chaque résolution d'écran.

C'est une approche, et c'est la plus rapide et la plus simple.

Pour ce faire, il vous suffit d'ajouter un autre conteneur au .flip-container qui contiendra chaque ligne. Ensuite, vous changez la position .flip-container en relative. Maintenant, vous devez changer la largeur du sélecteur .flip-container, .front, .back à 100%. De cette façon, le nouveau conteneur gérera la largeur de la ligne complète.

Voici un exemple :

.card-container{
    width: 100%; /* Adjust the target width*/
}
.flip-container {
    position: relative;
    perspective: 1000px;

}

    /* flip the pane when hovered */
    .flip-container:hover .flipper, .flip-container.hover .flipper {
        transform: rotateY(180deg);
    }

.flip-container, .front, .back {
    width: 100%;
  height: 180px;
}

/* flip speed goes here */
.flipper {
    transition: 0.9s;
    transform-style: preserve-3d;
    position: relative;
}

/* hide back of pane during swap */
.front, .back {
    
    backface-visibility: hidden;

    position: absolute;
    top: 0;
    left: 0;
}

/* front pane, placed above back */
.front {
    background: rgba(0,0,0,0.05);
  z-index: 2;
    /* for firefox 31 */
    transform: rotateY(0deg);
}

/* back, initially hidden pane */
.back {
      background: #00ccff;

    transform: rotateY(180deg);
}
<div class="container">
<div class="card-container">
    <div class="row">
        <div class="col">
            <div class="flip-container">
                <div class="flipper">
                    <div class="front">
                        <div class="inner">Front</div>
                    </div>
                    <div class="back">
                        <div class="inner">Back</div>
                    </div>
                </div>
            </div>
        </div>
 
    </div>
</div>
</div>

Si vous souhaitez toujours utiliser des mesures de largeur et de hauteur fixes (par exemple, px). Vous pouvez toujours utiliser @media query et ajuster les mesures ou le style général en fonction de chaque règle.

Disons que l'élément se brise sur les résolutions de petit écran. Tout ce que vous avez à faire est simplement d'ajouter une règle pour cela. Exemple :

@media screen and (max-width: 800px){
/* Your Style Here */

}

La règle ci-dessus sera appliquée chaque fois que la largeur de l'écran est inférieure ou égale à 800 px. Ainsi, vous pouvez utiliser max-width et min-width pour modifier les mesures de style en fonction de la largeur de l'écran du navigateur.

0
iSR5 21 avril 2017 à 11:22

Je sais que c'est un peu vieux, mais j'ai dérangé ce problème et j'ai pu trouver une assez bonne solution (ou du moins je le pensais) pour une carte flip réactive avec des images. Cela peut avoir besoin d'être modifié un peu si vous n'utilisez pas d'images, mais cela devrait être un bon début. Espérons que cela aidera quelqu'un d'autre!

Voici le violon https://jsfiddle.net/d6auxzef/4/

<div class="outer">
   <div class="flip-container">
    <div class="flipper">
      <div class="front">
        <img src="https://placehold.it/600/000033?text=FRONT" alt="Front" />
      </div>
      <div class="back">
         <img src="https://placehold.it/600/3300aa?text=BACK" alt="Back" />
      </div>
     </div>
  </div>
</div>

<style type="text/css">
    .outer {
      height: 100%;
      width: 100%;
      background: blue;
    }

    .flip-container {
      width: 50%;
      height: 100%;
      margin-bottom: 1em;
      perspective: 1000px;
    }

    .flip-container:hover .flipper {
      transform: rotateY(180deg);
    }

    .front,
    .back {
      width: 100%;
      height: 100%;
    }

    .flipper {
      position: relative;
      transform-style: preserve-3d;
      transition: .6s;
    }

    .front,
    .back {
      position: relative;
      z-index: 1;
      display: block;
      backface-visibility: hidden;
      overflow: hidden;
    }
    .front > img, .back >img {
      display: block;
      max-width: 100%;
    }

    .front {
      z-index: 2;
      transform: rotateY(0deg);
    }

    .back {
      position: absolute;
      top: 0;
      left: 0;
      z-index: 1;
      transform: rotateY(180deg);
    }
</style>
0
jheigs 14 août 2019 à 17:39

J'ai travaillé un peu là-dessus. J'utilise javascript pour définir une classe active, mais vous pouvez probablement utiliser: active /: focus. Voici un exemple SASS et un exemple en direct

.flip {
  width: 100%;
  height: 100%;
  -webkit-transition: 0.6s;
  -webkit-transform-style: preserve-3d;
  -ms-transition: 0.6s;
  -moz-transition: 0.6s;
  -moz-transform: perspective(1000px);
  -moz-transform-style: preserve-3d;
  -ms-transform-style: preserve-3d;
  transition: 0.6s;
  transform-style: preserve-3d;
  cursor: pointer;

  .active & {
    -webkit-transform: rotateY(180deg);
    -moz-transform: rotateY(180deg);
    transform: rotateY(180deg);
  }

  &--holder {
    display: block;
    margin-bottom: 2rem;
  }

  // Container
  &--container {
    position: relative;
    -webkit-perspective: 1000;
    -moz-perspective: 1000;
    -ms-perspective: 1000;
    perspective: 1000;
    -ms-transform: perspective(1000px);
    -moz-transform: perspective(1000px);
    -moz-transform-style: preserve-3d;
    -ms-transform-style: preserve-3d;
    width: 100%;
    height: auto;
    z-index: 100;

    .active & {
      z-index: 100;
    }
  }
  // Container end


  // face
  &--face {
    position: relative;
    width: 100%;
    height: auto;
    background-color: $color-grey;

    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -ms-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-transition: 0.6s;
    -webkit-transform-style: preserve-3d;

    -moz-transform-style: preserve-3d;
    -o-transition: 0.6s;
    -o-transform-style: preserve-3d;
    -ms-transition: 0.6s;
    -ms-transform-style: preserve-3d;
    transition: 0.6s;
    transform-style: preserve-3d;

    color: #f0f0f0;

    &.front {
      position: absolute;
      height: 100%;
      -webkit-transform: rotateY(0deg);
      -ms-transform: rotateY(0deg);
      background-repeat: no-repeat;

      &:hover {
        background-color: $color-grey-darker;
      }

      .active & {
          background-image: none;
          background-color: $color-white;
          -webkit-transition: 1000ms cubic-bezier(0.250, 0.250, 0.750, 0.750) background-color;
          -moz-transition: 1000ms cubic-bezier(0.250, 0.250, 0.750, 0.750) background-color;
          -ms-transition: 1000ms cubic-bezier(0.250, 0.250, 0.750, 0.750) background-color;
          -o-transition: 1000ms cubic-bezier(0.250, 0.250, 0.750, 0.750) background-color;
          transition: 1000ms cubic-bezier(0.250, 0.250, 0.750, 0.750) background-color;
      }
    }

    &.back {
        display: block;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;

        -webkit-transform: rotateY(-180deg);
        -moz-transform: rotateY(-180deg);
        -o-transform: rotateY(-180deg);
        -ms-transform: rotateY(-180deg);
        transform: rotateY(-180deg);

        padding: 2rem;
        text-align: center;
        background-color: $color-white;
        color: $color-gray;
        fill: $color-gray;
    }

    &:hover {
      background-color: $color-grey-lighter;
    }
  }

Et un extrait HTML:

<div class="flip--container">
  <article class="flip">
    <div class="front flip--face">
      <div class="flip--icon--holder">
        <i class="flip--icon fa fa-icon" aria-hidden="true"></i>
      </div>
    </div>
    <section class="back flip--face">
      <h3 class="flip--title">Title</h3>
      <ul class="flip--list">
        <li class="flip--list--item">Lorem</li>
        <li class="flip--list--item">Ipsum</li>
      </ul>
    </section>
  </article>
</div>
0
j-printemps 21 avril 2017 à 03:16