javascript - 如何翻转具有特定方向的图像

Question

我还是编码新手，请对我好:)

无论如何，我有 2 个输入文本 Credit Card .当我单击 CVV 输入文本时，它应该向左水平翻转，与 Expiry Year 输入文本应该向右水平翻转相同。我的问题是我不知道如何为这张卡片设置特定的翻转方向。

<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');
}

Answer 1

我打算用半代码来写这个来解释这个想法。

//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
}

写这样的东西可以防止您可能遇到的双击错误，并确保元素不会在不应该翻转的时候保持翻转状态。