2

Estou fazendo um formulário onde o usuário deve inserir os dados do cartão de crédito. Ao informar vai aparecendo na div que está acima, porém quando chegar em determinado input (Código de segurança) eu quero que esconda a div de cima e apareça a div que está oculta. Segue o código:

https://jsfiddle.net/3nrqbn9L/ (Não havia limite de caracteres disponíveis para postar aqui.)

Já tentei dessa forma:

$('#cartaoCodigoSeguranca').focus(function()){
$('.flip-container').css('transform: rotateY(180deg');}

2 Respostas 2

1

Primeiro, seu script tem alguns erros de sintaxe, vc fechou um parenteses no lugar errado, e tb fechou uma aspas no lugar errado...

inserir a descrição da imagem aqui

Agora vamos ao seu código

inserir a descrição da imagem aqui

Depois de corrigido isso eu tb ajustei o CSS para quando vc fizer o .focus() no input certo ele rotacionar o Cartão, e no .blur() ele volta o cartão para a posição original.

O que eu fiz, foi colocar uma classe nova (.gira) no flipcard quando vc faz o foco no input, essa classe nova tem a mesma propriedade do :hover. Basicamente foi isso, e no .blur() eu tiro essa classe.

Segue o código final. OBS: Eu ajustei o CSS da div.content apenas para vc visualizar o foco no input ativando a animação. Tb tirei o Base-64 e o SVG apenas para caber o código aqui no Snippet

$('#cartaoCodigoSeguranca').focus(function () {
    $('.flip-container').addClass('gira');
})
$('#cartaoCodigoSeguranca').blur(function () {
    $('.flip-container').removeClass('gira');
})
@font-face {
    font-family: 'ocr_a_std';
    src: url();
    font-weight: normal;
    font-style: normal;
}

.mk-icon-sim,
.mk-icon-visa,
.mk-icon-world-map {
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}

.mk-icon-world-map {
    background-image: url();
}

.mk-icon-visa {
    background-image: url('data:image/svg+xml;utf8,<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="176.982px" height="54.262px" viewBox="19.375 17.805 176.982 54.262" enable-background="new 19.375 17.805 176.982 54.262" xml:space="preserve"><g><polygon fill="#005098" points="81.723,71.287 90.678,18.719 105.012,18.719 96.041,71.287 "/><path fill="#005098" d="M148.015,20.014c-2.838-1.066-7.287-2.209-12.844-2.209c-14.158,0-24.131,7.129-24.219,17.349 c-0.08,7.552,7.119,11.769,12.555,14.282c5.58,2.577,7.455,4.221,7.432,6.522c-0.04,3.524-4.457,5.131-8.578,5.131 c-5.732,0-8.779-0.793-13.485-2.758l-1.844-0.834l-2.012,11.769c3.343,1.467,9.532,2.738,15.962,2.801 c15.064,0,24.837-7.047,24.949-17.962c0.056-5.976-3.76-10.526-12.025-14.28c-5.011-2.433-8.081-4.055-8.049-6.518 c0-2.185,2.597-4.521,8.209-4.521c4.682-0.074,8.081,0.948,10.719,2.014l1.291,0.607L148.015,20.014L148.015,20.014z"/><path fill="#005098" d="M184.757,18.769h-11.072c-3.431,0-5.996,0.936-7.504,4.359l-21.278,48.178h15.048 c0,0,2.453-6.478,3.014-7.901c1.644,0,16.259,0.024,18.351,0.024c0.425,1.84,1.74,7.876,1.74,7.876h13.3L184.757,18.769 L184.757,18.769z M167.088,52.655c1.186-3.03,5.708-14.697,5.708-14.697c-0.08,0.14,1.178-3.044,1.9-5.018l0.97,4.533 c0,0,2.742,12.549,3.318,15.182H167.088L167.088,52.655z"/><path fill="#005098" d="M69.705,18.757l-14.03,35.85l-1.499-7.283c-2.606-8.402-10.743-17.501-19.842-22.055l12.827,45.977 l15.16-0.02l22.56-52.47L69.705,18.757L69.705,18.757z"/><path fill="#F6A500" d="M42.664,18.725H19.551l-0.176,1.092c17.974,4.353,29.871,14.869,34.802,27.506l-5.019-24.162 C48.292,19.833,45.774,18.841,42.664,18.725L42.664,18.725z"/></g></svg>');
    background-size: 80px;
    background-color: #fff;
    visibility: hidden;
}

.mk-icon-sim {
    background-image: url('data:image/svg+xml;utf8,<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="52.603px" height="27.424px" viewBox="22.897 64.288 52.603 27.424" enable-background="new 22.897 64.288 52.603 27.424" xml:space="preserve"><rect x="72.407" y="79.211" fill="none" width="1.025" height="6.497"/><path fill="#444" d="M41.963,84.221v4.517c0,0.546-0.445,0.993-0.991,0.993H22.897v1.981h18.075h26.153H75.5v-1.981h-8.375 c-0.546,0-0.991-0.447-0.991-0.993v-4.517c0-0.546,0.445-0.989,0.991-0.989H75.5v-1.984c-1.865,0-8.375,0-8.375,0 c-0.546,0-0.991-0.444-0.991-0.99V75.74c0-0.546,0.445-0.989,0.991-0.989H75.5v-1.985h-8.375c-1.64,0-2.975,1.335-2.975,2.973v4.518 c0,0.764,0.302,1.455,0.776,1.981c-0.474,0.527-0.776,1.22-0.776,1.982v4.517c0,0.35,0.072,0.68,0.185,0.993H43.763 c0.111-0.313,0.182-0.642,0.182-0.993V84.22c0-0.761-0.297-1.455-0.771-1.982c0.474-0.526,0.771-1.216,0.771-1.981v-4.518 c0-0.762-0.297-1.453-0.771-1.981c0.474-0.527,0.771-1.217,0.771-1.982V67.26c0-0.349-0.071-0.678-0.182-0.99H75.5v-1.982H40.971 H22.897v1.982h18.075c0.546,0,0.991,0.444,0.991,0.99v4.516c0,0.546-0.445,0.991-0.991,0.991H22.897v1.984h18.075 c0.546,0,0.991,0.443,0.991,0.989v4.518c0,0.546-0.445,0.99-0.991,0.99H22.897v1.984h18.075 C41.518,83.232,41.963,83.675,41.963,84.221z"/></svg>');
    background-size: 55px;
}

*,
:after,
:before {
    box-sizing: border-box
}

.pull-left {
    float: left
}

.pull-right {
    float: right
}

.clearfix:after,
.clearfix:before {
    content: '';
    display: table
}

.clearfix:after {
    clear: both;
    display: block
}

.credit-card-wrap .mk-icon-world-map:before,
.credit-card-wrap .credit-card-number:before {
    content: '';
    position: absolute;
}

.credit-card-wrap {
    /* top:50%; */
    /* left:50%; */
    width: 100%;
    height: auto;
    /*position:fixed;*/
    position: relative;
    border-radius: 20px;
    background: #5D4157;
    /* margin-left:-225px; */
    /*margin-top:-142.5px;*/
    background: -webkit-linear-gradient(to left, #5D4157, #A8CABA);
    background: linear-gradient(to left, #5D4157, #A8CABA);
    box-shadow: 2px 2px rgba(0, 0, 0, .4);
}

.credit-card-wrap .mk-icon-world-map {
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: absolute;
    border-radius: inherit;
}

.credit-card-wrap .mk-icon-world-map:before {
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 0;
    background: rgba(0, 0, 0, .4);
    background: radial-gradient(circle at 0% 50%, rgba(96, 16, 48, 0) 9px, rgba(0, 0, 0, .2) 10px, rgba(96, 16, 48, 0) 11px) 0px 10px, radial-gradient(at 100% 100%, rgba(96, 16, 48, 0) 9px, rgba(255, 255, 255, .2) 10px, rgba(96, 16, 48, 0) 11px), rgba(0, 0, 0, .6);
    background-size: 20px 20px;
}

.credit-card-wrap .credit-card-inner {
    z-index: 100;
    padding: 30px;
    width: inherit;
    height: inherit;
    position: relative;
}

.credit-card-inner footer {
    background: none;
}

.credit-card-wrap .credit-logo .text {
    font-size: 24px;
    font-weight: 500;
    margin-left: 10px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .8);
    display: none;
}

.credit-card-wrap .credit-logo .shape {
    width: 40px;
    height: 40px;
    display: inline-block;
    background-color: #dc143c;
    box-shadow: -2px 2px 0 rgba(255, 255, 255, .8);
    border-radius: 40px 0 40px 40px;
    transform: rotate(-45deg);
    display: none;
}

.credit-card-wrap .credit-logo .shape>.txt {
    color: #ccc;
    display: block;
    width: inherit;
    font-size: 14px;
    height: inherit;
    font-weight: 500;
    line-height: 40px;
    text-align: center;
    transform: rotate(45deg);
}

.credit-card-wrap .credit-font {
    color: #fff;
    font-size: 18px;
    font-family: ocr_a_std, sans-serif;
    text-shadow: -1px -1px 0px rgba(255, 255, 255, 0.3), 1px 1px 0px rgba(0, 0, 0, 0.8);
}

.credit-card-wrap .credit-card-number {
    font-size: 18px;
    text-align: left;
    position: relative;
    letter-spacing: 2px;
    margin-bottom: 20px;
    white-space: nowrap;
}

.credit-card-wrap .credit-card-number:before {
    top: 100%;
    font-size: 12px;
    font-family: Roboto;
    content: attr(data-text);
    display: none;
}

.credit-card-wrap .credit-card-date {
    color: #fff;
    text-align: center;
    margin-top: 19px;
    margin-left: 32px;
    width: 100%;
}

.credit-card-wrap .credit-card-date .title {
    width: 62px;
    color: #deb887;
    font-size: 12px;
    line-height: 14px;
    text-align: right;
    display: inline-block;
    text-transform: uppercase;
}

.credit-card-wrap .credit-card-date .credit-font {
    top: -5px;
    left: 10px;
    position: relative;
}

.credit-card-wrap .credit-author {
    padding-top: 30px;
    position: absolute;
}

.credit-card-wrap .mk-icon-sim {
    width: 55px;
    height: 40px;
    margin: 20px 0;
    border-radius: 8px;
    background-color: #fdd76f;
    position: absolute;
    top: 60px;
}

.credit-card-wrap .mk-icon-visa {
    width: 90px;
    height: 45px;
    top: -50px;
    position: relative;
    visibility: hidden;
}

.credit-card-wrap .footer {
    /* left:30px; */
    /* right:30px; */
    /* bottom:30px; */
    /* position:absolute; */
}

.credit-card-wrap .footer .pull-left {
    width: 100%;
}

.mesAno1,
.mesAno2 {
    width: 49%;
    display: inline-block;
}

.mesAno2 {
    margin-top: 23px;
}

.mesAno3 {
    width: 100%;
    clear: both;
}

.bandeiras label {
    width: 23%;
}

.bandeiras input[type="radio"] {
    display: none;
}

.credt {
    width: 45%;
    display: inline-block;
}

/* O container geral define a perspectiva */

.flip-container {
    perspective: 1000;
}

/* vira os containers frente e verso quando o mouse passa em cima */

.flip-container:hover .flipper,
.flip-container.hover .flipper {
    transform: rotateY(180deg);
}


/*.flip-container, .front, .back {
        width: 320px;
        height: 480px;
    }*/

/* define a velocidade da transição */

.flipper {
    transition: 0.6s;
    transform-style: preserve-3d;
    position: relative;
}

/* esconde o verso durante a animação */

.card-front,
.card-back {
    backface-visibility: hidden;
    position: absolute;
    top: 0;
    left: 0;
}

/* frente posicionada sobre o verso */

.card-front {
    z-index: 2;
}

/* verso inicialmente escondido */

.card-back {
    transform: rotateY(180deg);
}


/* Clasees adicionadas  */

.flip-container.gira .flipper{
    transform: rotateY(180deg);
}
.content {
    position: absolute;
    top: 200px;
}
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>

<div class="flip-container" ontouchstart="this.classList.toggle('hover');">
    <div class="flipper">
        <!-- CARTÃO DE CRÉDITO FRENTE -->
        <div class="credit-card-wrap card-front">
            <div class="mk-icon-world-map"></div>
            <div class="credit-card-inner">
                <!-- <header class="header"> -->
                <div class="credit-logo">
                    <div class="shape"><span class="txt"></span></div> <span class="text">Banco</span>
                </div>
                <!-- </header> -->
                <div class="mk-icon-sim"></div>
                <div class="credit-font credit-card-number" id="cartaoNumeroCartao" data-text="4716">9999 9999 9999
                    9999</div>
                <footer class="footer">
                    <div class="clearfix">
                        <div class="pull-left">
                            <div class="credit-card-date">
                                <div class="credt">
                                    <span class="title">VALID THRU</span>
                                    <span class="credit-font" id="valMonth">01</span>
                                    <span class="credit-font">/</span>
                                    <span class="credit-font" id="valYear">18</span>
                                </div>
                                <div class="credt">
                                    <span class="title">COD.</br> SEG.</span>
                                    <span class="credit-font" id="codSeg">999</span>
                                </div>
                            </div>
                            <div id="cartaoNomeCartao" class="credit-font credit-author">João da Silva</div>
                        </div>
                        <div class="pull-right">
                            <div class="mk-icon-visa"></div>
                        </div>
                    </div>
                </footer>
            </div>
        </div>

        <!-- CARTÃO DE CRÉDITO VERSO -->
        <div class="credit-card-wrap card-back">
            <div class="mk-icon-world-map"></div>
            <div class="credit-card-inner">
                <!-- <header class="header"> -->
                <div class="credit-logo">
                    <div class="shape"><span class="txt"></span></div> <span class="text">Banco</span>
                </div>
                <!-- </header> -->
                <div class="mk-icon-sim"></div>
                <div class="credit-font credit-card-number" style="visibility: hidden;" id="cartaoNumeroCartao"
                    data-text="4716"></div>
                <footer class="footer">
                    <div class="clearfix">
                        <div class="pull-left">
                            <div class="credit-card-date">
                                <div class="credt">
                                    <span class="title"></span>
                                    <span class="credit-font" id="valMonth"></span>
                                    <span class="credit-font">/</span>
                                    <span class="credit-font" id="valYear"></span>
                                </div>
                                <div class="credt">
                                    <span class="title"></br> </span>
                                    <span class="credit-font" id="codSeg"></span>
                                </div>
                            </div>
                            <div id="cartaoNomeCartao" class="credit-font credit-author"></div>
                        </div>
                        <div class="pull-right">
                            <div class="mk-icon-visa"></div>
                        </div>
                    </div>
                </footer>
            </div>
        </div>
    </div>
</div>
<div class="content">
    <div class="divider">&nbsp;</div>

    <label>
        <span>
            Nome que está no cartão
            <strong class="color-highlight">*</strong>
        </span>
        <input class="text fields" type="text" id="cartaoNome" name="cartaoNome" value="" autocomplete="off">
    </label>
    <label>
        <span>
            Número de cartão
            <strong class="color-highlight">*</strong>
        </span>
        <input class="text fields" type="text" id="cartaoNumero" name="cartaoNumero" value="" autocomplete="off"
            maxlength="19">
    </label>
    <div class="mesAno1">
        <label>
            <span>
                Validade
                <strong class="color-highlight">*</strong>
                (<a data-tooltip="Mês e ano de expedição da validade do seu cartão">O que é isto?</a>)
            </span>
            <select class="select fields" name="cartaoValidadeMes" id="cartaoValidadeMes">
                <option value="">Mês</option>
                <option value="01">01</option>
                <option value="02">02</option>
                <option value="03">03</option>
                <option value="04">04</option>
                <option value="05">05</option>
                <option value="06">06</option>
                <option value="07">07</option>
                <option value="08">08</option>
                <option value="09">09</option>
                <option value="10">10</option>
                <option value="11">11</option>
                <option value="12">12</option>
            </select>
        </label>
    </div>
    <div class="mesAno2">
        <label>
            <select class="select fields" name="cartaoValidadeAno" id="cartaoValidadeAno">
                <option value="">Ano</option>

            </select>
        </label>
    </div>
    <div class="mesAno3">
        <div class="mesAno1">
            <label>
                <span>
                    Cód. de segurança
                    <strong class="color-highlight">*</strong>
                    (<a data-tooltip="Este é o código de 3 ou 4 dígitos que fica no verso do seu cartão.">O que é
                        isto?</a>)
                </span>
                <input class="text fields mask-nro" type="text" id="cartaoCodigoSeguranca"
                    name="cartaoCodigoSeguranca" value="" maxlength="4" autocomplete="off">
            </label>
        </div>
    </div>
</div>

0

Usando jQuery você pode usar addClass() e removeClass() com CSS para animação.

CSS:

.flip-rotate {
  transform: rotateY(180deg);
}

.flip-container {
  transition: 1s;
}

jQuery:

$('#cartaoCodigoSeguranca').focus(function(){
    $('.flip-container').addClass('flip-rotate');
});

$('#cartaoCodigoSeguranca').blur(function(){
    $('.flip-container').removeClass('flip-rotate');
});

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .