Animated Card Flip

Animated Card Flip / Flip card al estilo perfil de usuario con animación con HTML CSS y JS By  Ana Travas

HTML

<div class="cards-wrapper">
 <div class="card-wrapper">
 <div class="card-1 card-object card-object-hf"><a class="face front" href="#">
 <div class="title-wrapper">
 <div class="title">Jenny</div>
 <div class="subtitle">felis hairyus</div>
 </div></a><a class="face back" href="#">
 <div class="img-wrapper">
 <div class="avatar"></div>
 </div>
 <div class="info-wrapper">
 <div class="info-title">Jenny</div>
 <ul class="info-content">
 <li class="info-content-item">Age <span>6 years</span></li>
 <li class="info-content-item">Length <span>46cm</span></li>
 <li class="info-content-item">Weight <span>4kg</span></li>
 </ul>
 </div></a></div>
 </div>
 <div class="card-wrapper">
 <div class="card-2 card-object card-object-hf"><a class="face front" href="#">
 <div class="title-wrapper">
 <div class="title">Mishka</div>
 <div class="subtitle">felis catus</div>
 </div></a><a class="face back" href="#">
 <div class="img-wrapper">
 <div class="avatar"></div>
 </div>
 <div class="info-wrapper">
 <div class="info-title">Mishka</div>
 <ul class="info-content">
 <li class="info-content-item">Age <span>7 years</span></li>
 <li class="info-content-item">Length <span>42cm</span></li>
 <li class="info-content-item">Weight <span>3.8kg</span></li>
 </ul>
 </div></a></div>
 </div>
 <div class="card-wrapper">
 <div class="card-3 card-object card-object-hf"><a class="face front" href="#">
 <div class="title-wrapper">
 <div class="title">Kyra</div>
 <div class="subtitle">felix pumus</div>
 </div></a><a class="face back" href="#">
 <div class="img-wrapper">
 <div class="avatar"></div>
 </div>
 <div class="info-wrapper">
 <div class="info-title">Kyra</div>
 <ul class="info-content">
 <li class="info-content-item">Age <span>5 years</span></li>
 <li class="info-content-item">Length <span>50cm</span></li>
 <li class="info-content-item">Weight <span>5.2kg</span></li>
 </ul>
 </div></a></div>
 </div>
</div>
<div class="info">Powered by <a href="http://animista.net/play/basic/flip-2/flip-2-hor-top-fwd" target="_blank">flip-2-hor-top-fwd</a> and <a href="http://animista.net/play/basic/flip-2/flip-2-hor-bottom-fwd" target="_blank">flip-2-hor-bottom-fwd</a> animations from <a href="http://animista.net/play" target="_blank">Animista.net</a></div>


CSS

@font-face{font-family:'Archivo Black';font-style:normal;font-weight:400;src:local('Archivo Black Regular'),local('ArchivoBlack-Regular'),url(https://fonts.gstatic.com/s/archivoblack/v9/HTxqL289NzCGg4MzN6KJ7eW6CYyF-w.ttf) format('truetype')}
body{font:"Helvetica Neue",Helvetica,Arial,sans-serif;background:linear-gradient(45deg,rgba(22,167,175,.6) 5%,rgba(23,27,158,.7) 55%,rgba(68,9,82,.5) 100%) no-repeat;background-size:200%;color:#222}
body,html{height:100%}
.cards-wrapper{position:relative;height:100%;list-style:none;margin:0;padding:0 5%;display:flex;justify-content:center;align-items:center}
.card-wrapper{display:block;float:left;position:relative;margin:0;width:28%;height:0;padding:0 0 28%;-webkit-perspective:700px;perspective:700px}
.card-object{color:#FFF;display:block;float:left;position:absolute;top:6%;left:6%;width:88%;height:88%;-webkit-transform-style:preserve-3d;transform-style:preserve-3d}
.card-object.card-1 .front{background:url(https://www.dropbox.com/s/8cc22nblu4y4vzi/jenny.jpeg?raw=1) 90% 35%/115% #222}
.card-object.card-1 .back .img-wrapper{background:url(https://www.dropbox.com/s/8cc22nblu4y4vzi/jenny.jpeg?raw=1) 70% 45%/160%}
.card-object.card-1 .back .avatar{background:url(https://www.dropbox.com/s/8cc22nblu4y4vzi/jenny.jpeg?raw=1) 40% 20%/130% 130%}
.card-object.card-2 .front{background:url(https://www.dropbox.com/s/8l8snk9wcyxbo24/miska.jpeg?raw=1) 50% 90%/105% no-repeat #222}
.card-object.card-2 .back .img-wrapper{background:url(https://www.dropbox.com/s/8l8snk9wcyxbo24/miska.jpeg?raw=1) 70% 50%/140%}
.card-object.card-2 .back .avatar{background:url(https://www.dropbox.com/s/8l8snk9wcyxbo24/miska.jpeg?raw=1) 50% 50%/140% 140% no-repeat}
.card-object.card-3 .front{background:url(https://www.dropbox.com/s/l9knvp7vgci3p9c/kira.jpg?raw=1) 80% 100%/108% no-repeat #222}
.card-object.card-3 .back .img-wrapper{background:url(https://www.dropbox.com/s/l9knvp7vgci3p9c/kira.jpg?raw=1) 90% 40%/115% no-repeat}
.card-object.card-3 .back .avatar{background:url(https://www.dropbox.com/s/l9knvp7vgci3p9c/kira.jpg?raw=1) 0 50%/120% 120% no-repeat #fff}
.card-object.flip-in.card-1,.card-object.flip-in.card-3{-webkit-animation:flip-2-hor-top-fwd .8s cubic-bezier(0.68,-.55,.265,1.55) both;animation:flip-2-hor-top-fwd .8s cubic-bezier(0.68,-.55,.265,1.55) both}
.card-object.flip-in.card-2{-webkit-animation:flip-2-hor-bottom-fwd .8s cubic-bezier(0.68,-.55,.265,1.55) both;animation:flip-2-hor-bottom-fwd .8s cubic-bezier(0.68,-.55,.265,1.55) both}
.card-object.flip-out.card-1,.card-object.flip-out.card-3{animation:flip-2-hor-top-fwd .8s cubic-bezier(0.68,-.55,.265,1.55) reverse both}
.card-object.flip-out.card-2{animation:flip-2-hor-bottom-fwd .8s cubic-bezier(0.68,-.55,.265,1.55) reverse both}
.card-object-hf .back{-webkit-transform:rotateX(180deg);transform:rotateX(180deg)}
.face{color:#fff;text-decoration:none;display:flex;justify-content:center;align-items:flex-end;flex-wrap:wrap;position:absolute;width:100%;height:100%;-webkit-backface-visibility:hidden;backface-visibility:hidden}
.face.front{z-index:20;overflow:hidden;background-repeat:no-repeat;background-position:50% 50%}
.face.front::before{position:absolute;top:-1px;right:-1px;bottom:-1px;left:-1px;content:"";background:linear-gradient(45deg,rgba(0,0,0,.95) 0,rgba(0,0,0,.5) 40%,rgba(0,0,0,.1) 100%) no-repeat;opacity:.7;z-index:20;transition:opacity .2s ease}
.face.front::after{position:absolute;top:7%;right:7%;bottom:7%;left:7%;border:1px solid rgba(255,255,255,.35);z-index:100;content:""}
.face.front .title-wrapper{position:absolute;bottom:3%;left:25%;right:25%;overflow:hidden;display:flex;justify-content:center;align-items:center;text-align:center;flex-wrap:wrap;z-index:100;-webkit-transform:translateY(0);transform:translateY(0);transition:-webkit-transform .28s ease;transition:transform .28s ease;transition:transform .28s ease,-webkit-transform .28s ease}
.face.front .title-wrapper .title{position:relative;font-family:'Archivo Black',sans-serif;width:100%;text-transform:uppercase;font-size:2vw;line-height:1;opacity:.8;transition:opacity .2s ease}
.face.front .title-wrapper .title::after{display:block;margin:7% auto 8%;width:100%;height:1px;content:"";background-color:#fff;opacity:.5;-webkit-transform:scale(0);transform:scale(0);transition:-webkit-transform .15s;transition:transform .15s;transition:transform .15s,-webkit-transform .15s}
.face.front .title-wrapper .subtitle{font-size:.9vw;line-height:1;letter-spacing:1px;text-transform:uppercase;opacity:0;transition:opacity .15s}
.face.front:hover::before{opacity:.9}
.face.front:hover .title-wrapper{-webkit-transform:translateY(-50%);transform:translateY(-50%)}
.face.front:hover .title-wrapper .title{opacity:1}
.face.front:hover .title-wrapper .title::after{-webkit-transform:scale(1);transform:scale(1);opacity:.5;transition-delay:.15s;transition-duration:.2s}
.face.front:hover .title-wrapper .subtitle{opacity:.7;transition-delay:.2s;transition-duration:.2s}
.face.back{color:#222;background:#fff;z-index:10}
.info-container{position:absolute;display:flex;justify-content:center;flex-wrap:wrap;align-items:flex-start;top:6%;right:6%;bottom:6%;left:6%;padding:0}
.img-wrapper{position:absolute;top:0;left:0;width:100%;height:38%;z-index:10}
.img-wrapper::after{content:"";display:block;position:absolute;top:0;right:0;bottom:0;left:0;background:rgba(14,6,70,.6);opacity:.7}
.avatar{position:absolute;left:50%;height:68%;width:25.84%;display:block;border-radius:50%;margin-top:25.08%;margin-left:-12.92%;background-color:#fff;border:3px solid #FFF;z-index:20}
.info-wrapper{display:flex;justify-content:center;align-items:center;flex-wrap:wrap;position:absolute;top:50.92%;left:0;right:0;bottom:0;padding:4% 15% 15%}
.info-title{font-size:1.5vw;font-family:'Archivo Black',sans-serif;padding:0;margin:0;text-align:center;display:block;width:100%}
.info-content{display:flex;justify-content:space-between;align-items:center;width:100%;padding:8% 0 0;margin:8% 0 0;border-top:1px solid #e0e0e0}
.info-content-item{font-size:.75vw;line-height:1;text-align:center;display:inline-block;padding:0;margin:0;text-transform:uppercase;color:#aaa}
.info-content-item span{display:block;font-weight:700;font-size:1.1vw;margin-top:7px;text-transform:none;color:#222}
.info{position:absolute;bottom:30px;left:5%;right:5%;font-size:1em;text-align:center}
.info a{color:#8c0f8c;text-decoration:none}
.info a:hover{text-decoration:underline}
@-webkit-keyframes flip-2-hor-top-fwd{0%{-webkit-transform:translateY(0) translateZ(0) rotateX(0);transform:translateY(0) translateZ(0) rotateX(0);-webkit-transform-origin:50% 0;transform-origin:50% 0}
100%{-webkit-transform:translateY(-100%) translateZ(100px) rotateX(-180deg);transform:translateY(-100%) translateZ(100px) rotateX(-180deg);-webkit-transform-origin:50% 100%;transform-origin:50% 100%}}
@keyframes flip-2-hor-top-fwd{0%{-webkit-transform:translateY(0) translateZ(0) rotateX(0);transform:translateY(0) translateZ(0) rotateX(0);-webkit-transform-origin:50% 0;transform-origin:50% 0}
100%{-webkit-transform:translateY(-100%) translateZ(100px) rotateX(-180deg);transform:translateY(-100%) translateZ(100px) rotateX(-180deg);-webkit-transform-origin:50% 100%;transform-origin:50% 100%}}
@-webkit-keyframes flip-2-hor-bottom-fwd{0%{-webkit-transform:translateY(0) translateZ(0) rotateX(0);transform:translateY(0) translateZ(0) rotateX(0);-webkit-transform-origin:50% 100%;transform-origin:50% 100%}
100%{-webkit-transform:translateY(100%) translateZ(100px) rotateX(180deg);transform:translateY(100%) translateZ(100px) rotateX(180deg);-webkit-transform-origin:50% 0;transform-origin:50% 0}}
@keyframes flip-2-hor-bottom-fwd{0%{-webkit-transform:translateY(0) translateZ(0) rotateX(0);transform:translateY(0) translateZ(0) rotateX(0);-webkit-transform-origin:50% 100%;transform-origin:50% 100%}
100%{-webkit-transform:translateY(100%) translateZ(100px) rotateX(180deg);transform:translateY(100%) translateZ(100px) rotateX(180deg);-webkit-transform-origin:50% 0;transform-origin:50% 0}}

JS

var $cards = $('.card-object'),
    $faceButtons = $('.face');

$faceButtons.on('click', flipCard);

function flipCard(event) {
    event.preventDefault();

    var $btnFace = $(this),
        $card = $btnFace.parent('.card-object');

    if ($card.hasClass('flip-in')) {
        closeCards();
    } else {
        closeCards();
        openCard($card);
    }

}

function closeCards() {
    $cards.each(function() {
        $(this)
            .filter('.flip-in')
            .removeClass('flip-in')
            .queue(function() {
                // Force reflow hack
                var reflow = this.offsetHeight;
                $(this)
                    .addClass('flip-out')
                    .dequeue();
            })

    });
}

function openCard($card) {
    $card
        .removeClass('flip-out')
        .queue(function() {
            // Force reflow hack
            var reflow = this.offsetHeight;
            $(this)
                .addClass('flip-in')
                .dequeue();
        });

}
¿Te gusto el post?
¡Compártelo!