Das gespiegelte Bild wird gespiegelt. Wie wird das gespiegelte Bild nicht gespiegelt?

Ich habe verschiedene Möglichkeiten ausprobiert, um Bild 1 in Bild 2 umzuwandeln und habe mich schließlich gegen irgendwelche Jquery-Plugins entschieden, und zwar auf diese Weise. Bild 2 wird mit JavaScript in die Bildklasse "back1" eingefügt. Aber jetzt ist das gespiegelte Bild 2 Spiegelbild des Originalbildes 2. Wie mache ich es so, dass das gespiegelte Bild nicht gespiegelt wird?Das gespiegelte Bild wird gespiegelt. Wie wird das gespiegelte Bild nicht gespiegelt?

Vielen Dank im Voraus.

wala = document.getElementsByClassName("back1"); 
 
wala[0].src = "https://placehold.it/300x200"; 
 
wala[0].style.cssFloat = "inherit"; 
 

 

 
function flip() { 
 
    $('.cardx').toggleClass('flipped'); 
 
}

.containerx { 
 
    width: 300px; 
 
    height: 200px; 
 
    position: relative; 
 
    border: 2px solid grey; 
 
} 
 
.cardx { 
 
    width: 100%; 
 
    height: 100%; 
 
    position: absolute; 
 
    -webkit-transition: -webkit-transform 2s; 
 
    -moz-transition: -moz-transform 2s; 
 
    -o-transition: -o-transform 2s; 
 
    transition: transform 2s; 
 
    -webkit-transform-style: preserve-3d; 
 
    -moz-transform-style: preserve-3d; 
 
    -o-transform-style: preserve-3d; 
 
    transform-style: preserve-3d; 
 

 
} 
 
.cardx div { 
 
    display: block; 
 
    height: 100%; 
 
    width: 100%; 
 
    position: absolute; 
 
    -webkit-backface-visibility: hidden; 
 
    -moz-backface-visibility: hidden; 
 
    -o-backface-visibility: hidden; 
 
    backface-visibility: hidden; 
 

 
} 
 
.cardx .front { 
 
    background: url("https://placehold.it/300x200/DCF8FF/333333") 
 
} 
 
.cardx .back { 
 
    -webkit-transform: rotateY(180deg); 
 
    -moz-transform: rotateY(180deg); 
 
    -o-transform: rotateY(180deg); 
 
    transform: rotateY(180deg); 
 

 
} 
 
.cardx.flipped { 
 
    -webkit-transform: rotateY(180deg); 
 
    -moz-transform: rotateY(180deg); 
 
    -o-transform: rotateY(180deg); 
 
    transform: rotateY(180deg); 
 

 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
 
<section class="containerx"> 
 
    <div class="cardx" onclick="flip()"> 
 
    <div class="front"></div> 
 

 
    <div class="back"></div> 
 
     <img class= "back1" alt="logo back" /> 
 
    </div> 
 
</section>

Quelle

2017-02-07 Ray Lu

Ich bin nicht sicher, was Sie fragen. Was ist der Unterschied zwischen "umgedreht" und "gespiegelt"? – dave

Umgedrehtes Bild ist wie Bild 1 ist das vordere Bild und Bild 2 ist das hintere Bild, und das hintere Bild wird in die Ansicht gedreht, wenn der Flip passiert. Das gespiegelte Bild ist Bild zwei, das gedreht wurde, was der falsche Weg ist. sieht so aus ..... http://imgur.com/a/WZtNq –

hinzufügen scaleX (-1), um Ihre CSS auf der Rückseite Element verwandeln das gespiegelte Bild zu entkommen.

.cardx .back { 
    -webkit-transform: rotateY(180deg) scaleX(-1); 
    -moz-transform: rotateY(180deg) scaleX(-1); 
    -o-transform: rotateY(180deg) scaleX(-1); 
    transform: rotateY(180deg) scaleX(-1); 

} 

.cardx.flipped { 
    -webkit-transform: rotateY(180deg) scaleX(-1); 
    -moz-transform: rotateY(180deg) scaleX(-1); 
    -o-transform: rotateY(180deg) scaleX(-1); 
    transform: rotateY(180deg) scaleX(-1); 

}

Siehe aktualisiert Schnipsel:

wala = document.getElementsByClassName("back1"); 
 
wala[0].src = "https://placehold.it/300x200"; 
 
wala[0].style.cssFloat = "inherit"; 
 

 

 
function flip() { 
 
    $('.cardx').toggleClass('flipped'); 
 
}

.containerx { 
 
    width: 300px; 
 
    height: 200px; 
 
    position: relative; 
 
    border: 2px solid grey; 
 
} 
 
.cardx { 
 
    width: 100%; 
 
    height: 100%; 
 
    position: absolute; 
 
    -webkit-transition: -webkit-transform 2s; 
 
    -moz-transition: -moz-transform 2s; 
 
    -o-transition: -o-transform 2s; 
 
    transition: transform 2s; 
 
    -webkit-transform-style: preserve-3d; 
 
    -moz-transform-style: preserve-3d; 
 
    -o-transform-style: preserve-3d; 
 
    transform-style: preserve-3d; 
 

 
} 
 
.cardx div { 
 
    display: block; 
 
    height: 100%; 
 
    width: 100%; 
 
    position: absolute; 
 
    -webkit-backface-visibility: hidden; 
 
    -moz-backface-visibility: hidden; 
 
    -o-backface-visibility: hidden; 
 
    backface-visibility: hidden; 
 

 
} 
 
.cardx .front { 
 
    background: url("https://placehold.it/300x200/DCF8FF/333333") 
 
} 
 
.cardx .back { 
 
    -webkit-transform: rotateY(180deg) scaleX(-1); 
 
    -moz-transform: rotateY(180deg) scaleX(-1); 
 
    -o-transform: rotateY(180deg) scaleX(-1); 
 
    transform: rotateY(180deg) scaleX(-1); 
 

 
} 
 
.cardx.flipped { 
 
    -webkit-transform: rotateY(180deg) scaleX(-1); 
 
    -moz-transform: rotateY(180deg) scaleX(-1); 
 
    -o-transform: rotateY(180deg) scaleX(-1); 
 
    transform: rotateY(180deg) scaleX(-1); 
 

 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
 
<section class="containerx"> 
 
    <div class="cardx" onclick="flip()"> 
 
    <div class="front"></div> 
 

 
    <div class="back"></div> 
 
     <img class= "back1" alt="logo back" /> 
 
    </div> 
 
</section>

Quelle

2017-02-07 02:36:57 dommmm

Vielen Dank! –

Das gespiegelte Bild wird gespiegelt. Wie wird das gespiegelte Bild nicht gespiegelt?

Antwort

Verwandte Themen