CSS Flip Box Effekt (Nur CSS und HTML) [Anleitung / Tutorial]

von | Okt 2, 2019 | Allgemein | 2 Kommentare

Schlagwörter: CSS - Tutorial

Inhaltsverzeichnis

Immer nur einfache Hover Effekte oder Overlay Effekte zu machen sind langweilig, manchmal muss man einfach einen anderen Effekt programmieren. Im heuten Video zeige ich euch wie man eine Flip Box macht. Also man sieht ein Bild und wenn man mit der Maus darüber fährt, dann dreht sich die Box um und zeigt den Hintergrund. Sowas kann man sehr gut für Profilseiten oder Team Webseiten verwenden. Vorderseite sieht man den Mitarbeiter und auf der Rückseite seine Kontaktdaten oder Social Media Profile.

So kleine Besonderheiten machen solche Effekte immer noch beeindruckender als sie sonst schon sind.

Video / Anleitung

CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
.middle {
            position: absolute;
            top: 50%;
            left:50%;
            transform: translate(-50%, -50%);
        }
        .card {
            cursor: pointer;
            width: 340px;
            height: 480px;
        }
 
        .front, .back {
            width: 100%;
            height: 100%;
            overflow: hidden;
            backface-visibility: hidden;
            position: absolute;
            transition: transform .6s linear;
        }
        .front img{
            height: 100%;
        }
        .f {
            transform: perspective(600px) rotateY(0deg);
        }
 
        .back {
            background: #f1f1f1;
            transform: perspective(600px) rotateY(180deg);
        }
        .back-content {
            color: #2c3e50;
            text-align: center;
            width: 100%;
        }
        .sm {
            margin: 20px 0;
        }
        .sm a {
            display: inline-flex;
            width: 40px;
            height: 40px;
            justify-content: center;
            align-items: center;
            color: #2c3e50;
            transition: 0.4s;
            border-radius: 50%;
        }
        .sm a:hover {
            background: #2c3e50;
            color: white;
        }
        .card:hover > .front {
         transform: perspective(600px) rotateY(-180deg);
        }
 
        .card:hover > .back {
          transform: perspective(600px) rotateY(0deg);  
        }

HTML

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
 <div class="card middle">
    <div class="front">
    <img src="berg.jpg" alt="">
    </div>
 
    <div class="back">
    <div class="back-content middle">
        <h2>Eric Mächler</h2>
        <span>Content Creator</span>
        <div class="sm">
        <a href="#"><i class="fab fa-facebook-f"></i></a>
        <a href="#"><i class="fab fa-twitter"></i></a>
        <a href="#"><i class="fab fa-instagram"></i></a>
        <a href="#"><i class="fab fa-youtube-square"></i></a>
        </div>
        </div>
    </div>
 
</div>




2 Kommentare

  1. Philipp Schäfer

    Hallo, ich bin es nochmal. Wie kann ich hier zwei Bilder nebeneinander bekommen?

    Antworten
  2. Philipp Schäfer

    Wie kann ich 2 Bilder nebeneinander hinbekommen und wie bekomme ich die Logos da rein? Ich habe jetzt einfach die Befehle hier kopiert, aber kann die Logos nicht sehen.

    Antworten

Einen Kommentar abschicken

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert

WordPress

Allgemein

Technik

Design

Konzept

WordPress Plugins

Interessantes

Vermarktung