Как перевернуть изображения в определенном направлении - PullRequest
Новая
       49

Как перевернуть изображения в определенном направлении

0 голосов
/ 10 октября 2019

Я все еще новичок в кодировании, будьте добры ко мне:)

В любом случае, у меня есть 2 ввода текста для Кредитная карта . Когда я щелкаю по тексту ввода CVV, он должен переворачиваться по горизонтали влево, так же, как и текст года окончания срока действия, по горизонтали вправо. Моя проблема в том, что я не знаю, как установить конкретное направление к этой карте. 

<input type="text" Placeholder="Expiration Year" onclick="flip()" />
<input type="text" placeholder="cvv" onclick="flip()" />
<section class="container">
    <div class="card">
        <div class="front">1</div>
        <div class="back">2</div>
    </div>
</section>

.container {
    width: 200px;
    height: 260px;
    position: relative;
    border: 1px solid #ccc;
    -webkit-perspective: 800px;
    -moz-perspective: 800px;
    -o-perspective: 800px;
    perspective: 800px;
}

.card {
    width: 100%;
    height: 100%;
    position: absolute;
    -webkit-transition: -webkit-transform 1s;
    -moz-transition: -moz-transform 1s;
    -o-transition: -o-transform 1s;
    transition: transform 1s;
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    -o-transform-style: preserve-3d;
    transform-style: preserve-3d;
    -webkit-transform-origin: 50% 50%;
}

.card div {
    display: block;
    height: 100%;
    width: 100%;
    line-height: 260px;
    color: white;
    text-align: center;
    font-weight: bold;
    font-size: 140px;
    position: absolute;
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -o-backface-visibility: hidden;
    backface-visibility: hidden;
}

.card .front {
    background: red;
}

.card .back {
    background: blue;
    -webkit-transform: rotateY(180deg);
    -moz-transform: rotateY(180deg);
    -o-transform: rotateY(180deg);
    transform: rotateY(180deg);
}

.card.flipped {
    -webkit-transform: rotateY(180deg);
    -moz-transform: rotateY(180deg);
    -o-transform: rotateY(180deg);
    transform: rotateY(180deg);
}


function flip() {
    $('.card').toggleClass('flipped');
}

1 Ответ

0 голосов
/ 10 октября 2019

Я напишу это в полукоде, чтобы просто объяснить идею. 

//pass the id of the element you want to flip    
function flip(idToFlip){    
    if(!$('#idToFlip').hasClass('flipped')){
        $('#idToFlip').addClass('flipped');

        //this function can check the state of other elements and place them in the correct state - you will have to write this yourself if needed
        cleanUpOtherElements();
    }
}
//bind this function to a focus-out/blur event to flip it back
function flipBack(idToFlipBack){
    //see above, it's almost the same
}

Запись чего-то подобного предотвращает ошибку двойного щелчка, с которой вы можете столкнуться, и гарантирует, что элементы нене падай, когда не должен.

...