Отраженное изображение зеркально, как сделать перевернутое изображение не отраженным?

Я пробовал различные способы перевернуть изображение 1 в изображение 2 и, наконец, решил против любых подключаемых модулей jquery и сделал это таким образом. Изображение 2 вставляется в класс изображения «back1» с помощью javascript. Но теперь перевернутое изображение 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

Большое спасибо! –

Отраженное изображение зеркально, как сделать перевернутое изображение не отраженным?

ответ

Смежные вопросы