翻轉的圖像是鏡像的，如何使翻轉的圖像不鏡像？

我嘗試了各種方法將圖像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>

來源

2017-02-07 Ray Lu

我不知道你在問什麼。「翻轉」和「鏡像」之間有什麼區別？ – dave

翻轉的圖像就像圖像1是前面的圖像，圖像2是後面的圖像，當翻轉發生時，後面的圖像旋轉到視圖中。鏡像圖像是旋轉進來的圖像二，這是錯誤的方式。看起來像這樣..... http://imgur.com/a/WZtNq –

添加的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>

來源

2017-02-07 02:36:57 dommmm

非常感謝！ –

翻轉的圖像是鏡像的，如何使翻轉的圖像不鏡像？

回答

相關問題