Flip Cards
Beim hover mit der Maus drehen sich die Karten .
Der hier verwendete 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>