Flip Card Hoehe richtig einstellen

[horstmann]

Können Sie mir erklären, was ich falsch mache.
1. erste Problem
An Hauptseite ganz unten, wo drei Bilder rechts sind, habe ich Flip Karte erstellt.
Problem, das die Karte nimmt nicht die Größe von Bild an, sondern musste height 490xp angeben , sonst zeigt es nicht an.
Abwohl habe height und with 100% angegeben
Wie soll richtig machen damit die Groesse von Bild genommen wird , damit dann beim Scalieren , die Bilder richtig Scaliert werden und nicht an height 490px haengt.
http://laserpatch.eu/index.html

2. zweite Problem
Flip Karte bei klick drehen sich um , aber Back seite bei klich dreht sich nicht um.
Wie soll ich das Problem loesen , damit bei jeden Klick die Karte sich umdreht.

<section class=" py-12 lgy-24 px-3">
<div class="container mx-auto px-6 lgx-c-0 bg-white border rounded-lg shadow-xl">
<h3 class="pb-6 pt-6">Das leisten wir für Sie</h3>
<div class="flex flex-row flex-wrap ">
<div class="w-full pl-2 md:w-1/2 flex flex-col ">
<h4 class="pb-6">Reparieren:</h4>
<p class="text-lg pr-8">
Kommen Sie mit hochwertigen Lederwaren zu uns, wenn etwas kaputt ist. Wie zum Beispiel: ein eingerissener
Riemen am Rucksack, ein Reißverschluss an der Tasche, der sich verhakt hat, schief getretene Stiefelsohlen,
ein locker gewordener Schuhabsatz. Der Erhalt von schönen, Ihnen lieb gewordenen Qualitätswaren ist uns ein
Anliegen. Wegwerfen war gestern!
</p>
</div>

<div class="flip-card w-full pl-2 pt-6 md:w-1/2 ">
<div class="flip-card h-full">
<div class="flip-card-inner rounded-lg">
<div>
<img class=" flip-card-front rounded-lg shadow-xl fade-in-image" src="media/img/reparieren_740.JPG"
alt="schuhe reparieren">
</div>
<div>
<img class=" flip-card-back rounded-lg shadow-xl fade-in-image" src="media/img/frau_verbessern_740.JPG"
alt="schuhe reparieren">
</div>
</div>
</div>
</div>

.flip-card {

perspective: 1000px;
}

.flip-card-inner {
position: relative;
width: 100%;
height: 100%;
text-align: center;
transition: transform 0.6s;
transform-style: preserve-3d;
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
}

.flip-card:hover .flip-card-inner {
transform: rotateY(180deg);
}

.flip-card-front, .flip-card-back {
position: absolute;
width: 100%;
height: 100%;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}



.flip-card-back {

transform: rotateY(180deg);
}

 

[basti1012]

Kannst du bei codepen.io ein funktionierendes Beispiel erstellen, am besten mit den Bildern.
Wenn ich den Code da reinkopiere und deine Bilder mit irgendwelchen anderen Bilden ersetzte kommt da nur Mist raus.

Mit den jetzigen Code habe ich keine Vorstellung wie das aussehen soll.
Bitte erstelle ein Funktionierendes Beispiel

2. zweite Problem
Flip Karte bei klick drehen sich um , aber Back seite bei klich dreht sich nicht um.
Wie soll ich das Problem loesen , damit bei jeden Klick die Karte sich umdreht.

Bei den jetzigen Code sehe ich nur ein hover und kein Klick.
Wenn dann fehlt da noch Code ode ich bin Blöd.
Deswegen wäre ein Beispiel gut.

 

[horstmann]

ich habe Ihnen in PN geschrieben

 

[horstmann]

Ich habe es hingekriegt , aber kam andere Problem.
Warum bei Klick auf die Bilder , erste Bild laesst sich flippen und zweite und dritte nicht ?
Auf der Seite, der Hauptseite, ganz unten, wo rechts 3 Bilder sind, die Bilder sind als Flip-Karte gemacht, sie werden durch KLICKEN umgedreht
http://laserpatch.eu/index.html

JS Code

<script>
const card = document.querySelector(".card__inner");
card.addEventListener("click", function (e) {
card.classList.toggle('is-flipped');
});
</script>

<div class="card w-full pl-2 pt-6 md:w-1/2 ">
<div class="card__inner ">
<div class=" rounded-lg">
<div class="card__face ">
<img class=" rounded-lg shadow-xl " src="media/img/kreieren_740.JPG"
alt="schuhe Kreieren">
</div>
<div class="card__face--back ">
<img class=" rounded-lg shadow-xl " src="media/img/frau_kreieneren_1_740.JPG"
alt="schuhe Kreieren">
</div>
</div>
</div>
</div>

 

[basti1012]

Weil du in dein Js Code nur eine Kate drehst.
Du muss querySelectorAll nutzen mit einer Schleife.

<script>
var card = document.querySelectorAll(".card__inner");
card.forEach(function(x){
     x.addEventListener("click", function(){
          x.classList.toggle('is-flipped');
     });
});
</script>

ungetestet.