I tried various ways to flip image 1 into image 2 and finally decided against any jquery plug ins, and did it this way. Image 2 is inserted into the "back1" image class using javascript. But now the flipped image 2 is mirror of the original image 2. How do I make it so that the flipped image is not mirrored?
Thanks in advance.
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>
Add scaleX(-1) to your css transform on the back element to escape the flipped image.
.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);
}
See updated snippet:
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>