Hallo ihr,

ich habe ein Problem, an dem ich mir die Zähne ausbeiße. Ich komme einfach nicht auf ein Ergebnis und habe auch schon einmal hier in die Runde gefragt, aber leider keine Anregung bekommen.

Kurz zu meinem Projekt: Ich will mein Portfolio programmieren und habe einzelne Projektseiten, durch die man sich mit Pfeilen navigieren kann. Jede Seite gibt eine erste Übersicht mit einem fullscreen-Projektbild und in der Mitte ist eine flipcard (Sechseck), darauf steht der Projektname.

Mit CSS und HTML habe ich eine flipcard erstellt. Rechts und links davon ist je ein Pfeil (pfeilr und pfeill). Wenn man jetzt über den rechten Pfeil hovert soll sich die Karte drehen.
Bisher dreht die flipcard sich beim Hovern über sich selbst. Mit CSS komme ich hier nicht weit und mit JavaScript finde ich mich nur sehr schwer zurecht. Wäre super, mir könnte dabei jemand helfen.

HTML:

  
<!-- FLIPCARD -->  
<div class="card-container">  
                <div class="card">  
                        <div class="front">  
                                <div class="thema">  
                                        <img src="Bilder/Sechseck.png" alt="Projekt">  
                                        <p class="HEAD"> Information Brochure </p>  
                                        <p class="SUBHEAD"> Editorial Design </p>  
                                </div>  
                        </div>  
  
                        <div class="back">  
                                <div class="thema">  
                                        <img src="Bilder/Sechseck.png" alt="Projekt">  
                                        <p class="NEXT"> click to see </p>  
                                        <p class="HEAD"> Information Brochure </p>  
                                        <p class="SUBHEAD"> Editorial Design </p>  
                                </div>  
                        </div>  
                </div>  
        </div>  
  
<!-- PFEILE -->  
        <div class="pfeile">  
                <div class="pfeill">  
                        <img src="Bilder/PfeilL.png" alt="Pfeill">  
                </div>  
  
                <div class="pfeilr">  
                        <a href="index1.html">  
                        <img src="Bilder/PfeilR.png" alt="Pfeilr">  
                </a>  
                </div>  
         </div>  

CSS:

  
/* flipcard */  
.card {  
    -webkit-transform-style: preserve-3d;  
    -webkit-perspective: 1000;  
    position: absolute;  
        top:50%;  
        left:50%;  
}  
  
.back, .front {  
    position: absolute;  
    -webkit-backface-visibility: hidden;  
    -webkit-transition: -webkit-transform 0.5s ease-out;  
    width: 100%;  
    height: 100%;  
}  
  
.back {  
    -webkit-transform: rotateY(180deg);  
}  
  
.front {  
}  
  
.card-container {  
    display: inline-block;  
    text-align: justify;  
}  
  
.card-container:hover .back {  
    -webkit-transform: rotateY(0deg);  
}  
  
.card-container:hover .front {  
    -webkit-transform: rotateY(-180deg);  
}  

Ist es denn noch möglich, eine zweite back-Seite zu erstellen, die dann erscheint, wenn ich mit der Maus über den linken Pfeil fahre? Dabei soll sich die 'Karte' dann entsprechend in die andere Richtung drehen.
Wenn das so funktioniert, bekomme ich weichere Übergänge zwischen den Projektseiten, da sich dann nur das Hintergrundbild ändert und dazu sehe ich, was mich als nächstes erwartet bzw. was ich mir zuletzt angesehen habe.

Würde mich total freuen, wenn jemand weiter weiß :)
Liebe Grüße!