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

【问题标题】：Flipped image is mirrored, how do make the flipped image not mirrored?翻转的图像是镜像的，如何使翻转的图像不镜像？
【发布时间】：2017-06-24 03:22:25
【问题描述】：

我尝试了各种方法将图像 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>

【问题讨论】：

我不确定你在问什么。 “翻转”和“镜像”有什么区别？
翻转后的图像就像图像 1 是正面图像，图像 2 是背面图像一样，当翻转发生时，背面图像会旋转到视图中。镜像的图像是旋转的图像二，这是错误的方式。看起来像这样.....imgur.com/a/WZtNq

标签： javascript jquery image flip mirror

【解决方案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);

}

查看更新的 sn-p：

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>

【讨论】：