Servus,

ich habe ein Problem, an dem ich mir die Zähne ausbeiße. Ich komme einfach nicht auf ein Ergebnis.

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 habe ich so gut wie keine Erfahrung. Kann mir hier 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?

Würde mich total freuen, wenn jemand weiter weiß :)