Bootstrap 4 Flip Cards

Beispiel

Das Basis-HTML-Struktur

<div class="card-container">
    <div class="card-flip">
        <div class="vorn">
           ...Inhalt
        </div>
        <div class="hinten">
            ...Inhalt
        </div>
    </div>
</div>

Das CSS

        .card-container {
            perspective: 600px;
        }

        .card-flip,
        .card-container {
            transform-style: preserve-3d;
            transition: all 1000ms ease;
        }

        .card-flip div {
            backface-visibility: hidden;
            transform-style: preserve-3d;
        }

        .hinten {
            transform: rotateY(-180deg);
        }

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

        .card-flip {
            display: grid;
            grid-template: 1fr / 1fr;
            grid-template-areas: "frontAndBack";
            transform-style: preserve-3d;
            transition: all 1000ms ease;
        }

        .vorn {
            grid-area: vornAndhinten;
        }

        .hinten {
            grid-area: vornAndhinten;
            transform: rotateY(-180deg);
        }

Durch das Erstellen von .row und .col-md-* können mehreree Flip-Cards platziert werden, so das die ganze Sache responsiv bleibt und auf verschiedenen Bildschirmgrößen angepasst wird.

Das gesamte HTML für das Beispiel

<section>
    <h3>Beispiel</h3>
    <div class="row">
        <div class="card-container col-md-3">
            <div class="card-flip">
                <div class="vorn front card">
                    <img src="images/001.jpg" class="img-fluid" />
                </div>
                <div class="hinten back card">
                    <img src="images/002.jpg" class="img-fluid" />
                </div>
            </div>
        </div>
        <div class="card-container col-md-3">
            <div class="card-flip">
                <div class="vorn front card">
                    <img src="images/003.jpg" class="img-fluid" />
                </div>
                <div class="hinten back card">
                    <img src="images/008.jpg" class="img-fluid" />
                </div>
            </div>
        </div>
        <div class="card-container col-md-3">
            <div class="card-flip">
                <div class="vorn front card">
                    <img src="images/005.jpg" class="img-fluid" />
                </div>
                <div class="hinten back card">
                    <img src="images/006.jpg" class="img-fluid" />
                </div>
            </div>
        </div>
        <div class="card-container col-md-3">
            <div class="card-flip">
                <div class="vorn front card">
                    <img src="images/011.jpg" class="img-fluid" />
                </div>
                <div class="hinten back card">
                    <img src="images/012.jpg" class="img-fluid" />
                </div>
            </div>
        </div>
    </div>
</section>