basti1012.bplaced.net

Du siehst gerade eine vereinfachte Darstellung unserer Inhalte. Normale Ansicht mit richtiger Formatierung.
    Beim hover mit der Maus drehen sich die Karten .

    Code

                                        
                                    <style>
    * {
        padding: 0;
        margin: 0;
    }
    
    figure {
        min-width: 1px;
        max-width: 100%;
        min-height: 1px;
        margin: 0rem;
    }
    
    img {
        min-width: 1px;
        display: block;
        max-width: 100%;
        /*max-height: 100vh;*/
        border: 0;
    }
    
    .mein_container {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
    }
    
    figure {
        position: relative;
        margin: 0;
    }
    
    img {
        width: 250px;
        height: 250px;
        border-radius: 15px;
    }
    
    figcaption {
        background: rgba(0, 0, 0, 0.5);
        color: white;
        text-align: center;
        position: absolute;
        bottom: 0;
        width: 100%;
        padding: 0.3rem 0rem;
        border-bottom-right-radius: 15px;
        border-bottom-left-radius: 15px;
    
    }
    
    h1 {
        text-align: center;
    
    }
    
    
    
    * {
        box-sizing: border-box;
    }
    
    
    @keyframes flipcard {
        0% {
            transform: scale(1) rotateY(0);
        }
    
        50% {
            transform: scale(2) rotateY(180deg);
        }
    
        100% {
            transform: scale(1) rotateY(180deg);
        }
    }
    
    
    .oisqa-widget {
        margin: 10px;
        width: 250px;
    }
    
    .oisqa-widget .flip-container {
        height: 250px;
    }
    
    .oisqa-widget .flip-container {
        width: 100%;
        /*  perspective: 1000; */
    }
    
    
    
    .oisqa-widget .flip-container:hover .flipper {
        transform-origin: 50% 50%;
        animation: flipcard 1s 0s 1 normal forwards;
    }
    
    .oisqa-widget .flipper {
        position: relative;
        transition: 0.6s;
        transform-style: preserve-3d;
    }
    
    .oisqa-widget .front,
    .oisqa-widget .back {
        position: absolute;
        top: 0px;
        left: 0px;
    
        backface-visibility: hidden;
        height: 250px;
        text-align: center;
        width: 100%;
    
    }
    
    .oisqa-widget .front {
        background: green;
        transform: rotateY(0deg);
        border-radius: 15px;
        border: 1px #c3c3c3 black;
        z-index: 2;
    }
    
    .oisqa-widget .back {
        background: blue;
        border: 1px #c3c3c3 red;
        border-radius: 15px;
        color: white;
        font-size: 40px;
        padding-top: 120px;
        transform: rotateY(180deg);
    }
    </style>
    <body>
        <header id="pageheader" class="pageheader">
            <h1>Figcaption-Problem</h1>
        </header>
        <main id="content" class="content">
            <section class="mein_container">
                <div class="oisqa-widget">
                    <div class="flip-container">
                        <div class="flipper">
                            <div class="front">
                                <figure>
                                    <img src="/image/2.png">
                                    <figcaption>Flip 1</figcaption>
                                </figure>
                            </div>
                            <div class="back">
                                <p class="question">Hier</p>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="oisqa-widget">
                    <div class="flip-container">
                        <div class="flipper">
                            <div class="front">
                                <figure>
                                    <img src="/image/3.png">
                                    <figcaption>Flip 2</figcaption>
                                </figure>
                            </div>
                            <div class="back">
                                <p class="question">kann</p>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="oisqa-widget">
                    <div class="flip-container">
                        <div class="flipper">
                            <div class="front">
                                <figure>
                                    <img src="/image/4.png">
                                    <figcaption>Flip 3</figcaption>
                                </figure>
                            </div>
                            <div class="back">
                                <p class="question">man</p>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="oisqa-widget">
                    <div class="flip-container">
                        <div class="flipper">
                            <div class="front">
                                <figure>
                                    <img src="/image/5.png">
                                    <figcaption>Flip 4</figcaption>
                                </figure>
                            </div>
                            <div class="back">
                                <p class="question">Texte</p>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="oisqa-widget">
                    <div class="flip-container">
                        <div class="flipper">
                            <div class="front">
                                <figure>
                                    <img src="/image/6.png">
                                    <figcaption>Flip 5</figcaption>
                                </figure>
                            </div>
                            <div class="back">
                                <p class="question">oder</p>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="oisqa-widget">
                    <div class="flip-container">
                        <div class="flipper">
                            <div class="front">
                                <figure>
                                    <img src="/image/7.png">
                                    <figcaption>Flip 6</figcaption>
                                </figure>
                            </div>
                            <div class="back">
                                <p class="question">Bilder</p>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="oisqa-widget">
                    <div class="flip-container">
                        <div class="flipper">
                            <div class="front">
                                <figure>
                                    <img src="/image/8.png">
                                    <figcaption>Flip 7</figcaption>
                                </figure>
                            </div>
                            <div class="back">
                                <p class="question">rein</p>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="oisqa-widget">
                    <div class="flip-container">
                        <div class="flipper">
                            <div class="front">
                                <figure>
                                    <img src="/image/9.png">
                                    <figcaption>Flip 8</figcaption>
                                </figure>
                            </div>
                            <div class="back">
                                <p class="question">machen</p>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="oisqa-widget">
                    <div class="flip-container">
                        <div class="flipper">
                            <div class="front">
                                <figure>
                                    <img src="/image/10.png">
                                    <figcaption>Flip 9</figcaption>
                                </figure>
                            </div>
                            <div class="back">
                                <p class="question">Cool ne</p>
                            </div>
                        </div>
                    </div>
                </div>
            </section>
        </main>
    </body>