翻转的图像是镜像的，如何使翻转的图像不镜像？

Question

我尝试了各种方法将图像1翻转为图像2，并最终决定使用任何jQuery插件，并以此方式完成。使用javascript将图像2插入到“back1”图像类中。但是现在翻转的图像2是原始图像2的镜像。我如何制作它以便翻转的图像不被镜像？

在此先感谢。

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>

Answer 1

添加的scaleX（-1），以你的CSS变换背面元件上，以逃避被翻动的图像。

.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); 

} 

见更新片段：

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>