Flip-Card mit Animationen
In folgendem Tutorial wird dir näher gebracht, wie du einen 3D-Card-Flip erstellen kannst, der sich durch einen Regler betätigen lässt. Zusammen mit diesem Flip wird jeweils auf der Vorder-, sowie Rückseite eine Animation erscheinen.
HTML Grundgerüst
<!DOCTYPE html>
<html lang="de" id="top"></html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Cardflip"
<link href="style.css" rel="stylesheet">
</head>
<body>Zuerst wird eine HTML-Datei mit den Pflichtelementem !DOCTYPE, <html>, <head> und <body> erstellt.
Im <body> wird der Code für die Flip-Card, die Bilder der Vorder- und Rückseite sowie die Checkbox, die später zum Regler wird, geschrieben. Um die Elemente in CSS zu bearbeiten wird das Stylesheet hier auch mit dem html verbunden.
<input class="container" type="checkbox" id="regler"/>
<label for="regler">
<span class="schrift1">Sommer<span class="schrift2">Winter</span></span>
</label>Was steht im <body> ?
Im <body> wird zunächst der Regler und dessen Beschriftung erstellt. Damit es möglich ist, die Checkbox mit dem <label> zu verbinden, muss mittels <label for> und der id die checkbox mit <label> verbunden werden. Dabei muss bei der Checkbox die id denselben Namen wie bei <label for> annehmen. Das <span> Element wird nur zur Beschriftung des Reglers benutzt.
<main>
<div class="card">
<div class="vorderseite">
<div class="bild1">
<img src="bilder/sommer.jpg" alt="">
</div>
<div class="bild3">
<img src="bilder/flossen.JPG" alt="">
</div>
</div>
<div class="rueckseite">
<div class="bild2">
<img src="bilder/winter.jpg" alt="">
</div>
<div class="bild4">
<img src="bilder/schneeflocke.JPG" alt="">
</div>
</div>
</div>
</main>
</body>
</html>Im nächsten Schritt wird ein <main> und ein div class="card"erstellt, diese ermöglichen es uns nachher mit dem CSS die Cards zu flippen.
In den zwei <div> Elementen sind weitere divs für <vorderseite> und <rueckseite> vorhanden, worin die vier Bilder liegen. Je nachdem, wie viele Animationen man haben möchte, kann man hier weitere divs mit images hinzufügen.
Bitte vergesst nicht, am Ende alle <div> Elemente zu schließen </div>!
Hiermit ist der HTML Code fertig und wir können nun an die Gestaltung mittels CSS gehen.
CSS
In diesem Teil wird der CSS-Code erläutert, mit dem das Ganze erst funktioniert.
body{
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
background-color: white;
}Zunächst wird der <body> so gestaltet, sodass die enthaltenen Elemente gecentered sind und untereinander stehen.
Checkbox wird zum Regler
.container {
display: none;
}Die Checkbox verschwindet durch display:none, da wir den Cardflip mit dem Regler ausführen.
.container:checked + label::before,
.container:not(:checked) + label::before{
position: absolute;
content: '';
z-index: -2;
background-color: black;
width: 100%;
height: 100%;
display: block;
top: 0;
left: 0;
}Hier wird die Box um den Regler gestaltet. In unserem Fall wird diese schwarz dargestellt, ihr könnt aber auch jede beliebige Farbe nehmen.
Die CSS Gestaltung des Containers , bevor der Regler hinzukommt, läuft folgendermaßen ab: Das label muss mit ::beforegekennzeichnet werden, da die Box unabhängig von dem Checkboxzustand immer dargestellt werden soll. Diese Box kann nach belieben gestaltet werden, in unserem Fall haben wir diese von dem Textfluss gelöst mittels absolute und als block dargestellt.
Mittels des z-index, der bei uns bei -2 liegt, stellen wir fest, dass die Box immer hinter der Schrift und dem Regler selbst bleibt.
.container:checked + label::after,
.container:not(:checked) + label::after{
position: absolute;
content: '';
z-index: -1;
background-color: white;
width: 120px;
height: 40px;
display: block;
top: 2.5px;
left: 2.3px;
border-radius: 2px;
transition: left 350ms linear;
}
.container:checked + label::after {
left: 126.5px;
}Bei der Gestaltung des Reglers muss der z-index einen Wert von -1 haben, um vor der schwarzen Box zu stehen. Hier muss das label, egal ob checked oder not checked ::after sein, sonst würde dieser nicht vor der schwarzen Box dargestellt werden.
Auch hier kann die Gestaltung beliebig erfolgen. Der Regler sollte nur die Hälfte der Box einnehmen, damit dieser gut erkennbar ist. Mit der transition:left kann der Regler linear von links nach rechts in der vorgegebenen Zeit verschoben werden, in unserem Beispiel 350ms.
Um den Regler wirklich zu verschieben, muss man dem containerwenn er gecheckt wird, die Position zuweisen wohin er sich verschieben soll.
.container:checked + label,
.container:not(:checked) + label{
position: relative;
display: flex;
text-align: center;
width: 189px;
height: 45px;
border-radius: 4px;
margin: 0 auto;
cursor: pointer;
font-family: 'Poppins', sans-serif;
font-weight: 600;
text-transform: uppercase;
font-size: 14px;
letter-spacing: 1px;
line-height: 44px;
padding: 0 30px;
overflow: hidden;
color: #fff;
}Egal ob der Container gechecked wurde oder nicht, das label mit der Schrift soll gleich bleiben. Hier kann die Schrift auch wieder nach belieben gestaltet werden.
Die Schrift ,,Sommer" und ,,Winter" wird mit der span class an richtiger Stelle platziert.
Cardflip
.container:checked ~ main .card{
transform: rotateY(180deg);
}
main{
perspective: 1000px;
margin: 2rem auto;
}
.card{
display: flex;
justify-content: center;
align-items: center;
transition: transform 700ms 400ms ease-out;
transform-style: preserve-3d;
}Damit sich die Card auch dreht bzw. flippt, müssen wir der card durch transform ein rotateY(180deg) geben, damit sich diese beim Betätigen des Reglers um 180 Grad dreht. Um den gewünschten 3D Effekt zu bekommen, muss bei main die perspective auf 1000px gestellt werden, anderenfalls erfolgt die Drehung nur horizontal.
Bei der card wird ein transorm-style benötigt mit preserve-3d , um die Rückseite beim Drehen anzuzeigen. Mit der transition kann mit der ersten Zeitangabe die Drehgeschwindigkeit definiert werden und mit der zweiten Zeitangabe wird der Zeitpunkt definiert wann die card flippen soll.
.vorderseite{
position: absolute;
}
.rueckseite{
position: relative;
transform: rotateY(180deg);
}
.vorderseite, .rueckseite{
backface-visibility: hidden;
}Damit Vorder-und Rückseite hintereinander dargestellt werden, muss der vorderseite die position absolute und der rueckseite eine position relative gegeben werden und zusätzlich noch ein transform das ebenfalls rotateY(180deg) enthält.
Bei vorderseite und rueckseite muss die backface-visibility:hidden sein, anderenfalls würde immer die Rückseite angezeigt werden.
.bild1{
width: 300px;
height: auto;
}
.bild1 img{
width: 100%;
height: auto;
border-radius: 6px;
}
.bild2{
width: 300px;
height: auto;
border-radius: 6px;
}
.bild2 img{
width: 100%;
height: auto;
border-radius: 6px;
}Die Bilder bild1 und bild2 werden hier nun je nach belieben skaliert, man muss nur darauf achten, dass die Bilder der Card am Ende dieselbe Größe haben, sonst liegen diese nicht genau hintereinander.
Bilderanimation
.bild3 img{
width: 100%;
height: auto;
border-radius: 10px;
}
.bild3{
width: 100px;
height: auto;
position: absolute;
display: block;
right: -30px;
bottom: 260px;
z-index: 3;
transform: translate3d(0, 0, 35px) scale(0.5);
opacity: 0;
transition: transform 400ms 100ms ease, opacity 300ms 250ms ease;
}
.container:not(:checked) ~ main .card .bild3 {
opacity: 1;
transform: translate3d(0, 0, 35px) scale(1);
transition: transform 400ms 1300ms ease, opacity 300ms 1300ms ease;
}
.bild4 img{
width: 100%;
height: auto;
border-radius: 10px;
}
.bild4{
width: 100px;
height: auto;
position: absolute;
display: block;
right: 200px;
bottom: 60px;
z-index: 3;
transform: translate3d(0, 0, 35px) scale(0.5);
opacity: 0;
transition: transform 400ms 100ms ease, opacity 300ms 250ms ease;
}
.container:checked ~ main .card .bild4 {
opacity: 1;
transform: translate3d(0, 0, 35px) scale(1);
transition: transform 400ms 1300ms ease, opacity 300ms 1300ms ease;
}Bei bild3 und bild4 ist es etwas komplizierter, da diese als Animationen erscheinen, aber beim Flip auch wieder verschwinden.
Der z-index liegt in unserem Fall bei 3, damit die Bilder vor der eigentlichen card liegen. Die opacity wird bei bild3 und bild4 auf 0 gesetzt, damit man anschließend beim jeweiligen Reglerzustand die opacity wieder auf 1 setzten kann. Bei transform:translate3d werden die Bilder dreidimensional positioniert, dabei kann man mit scale die Skalieranimation des einfliegenden Bildes verändern. Über transition: transform kann man den Zeitpunkt und die Animationsdauer nach belieben festlegen.
Geschafft !
Wir hoffen ihr hattet Spaß am erstellen einer eigenen Flip-Card mit Regler und Animationen und dass ihr etwas Neues lernen konntet.
Im Anschluss findet ihr noch unsere Dateien mit dem kompletten HTML und CSS Code sowie unsere verwendeten Bilder.
Vielen Dank fürs Vorbeischauen !
Quellen: https://codepen.io/ig_design/pen/VwedgWj
Download
