JSFiddle - React, Tailwind, and code Playground

by apaul34208

HTML

<div class='card' tabindex='1'>
    <div class='front'>1</div>
    <div class='back'>1</div>
</div>
<div class='card' tabindex='1'>
    <div class='front'>2</div>
    <div class='back'>2</div>
</div>
<div class='card' tabindex='1'>
    <div class='front'>3</div>
    <div class='back'>3</div>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi nulla enim, sollicitudin id ullamcorper ut, interdum sit amet est. Proin sagittis erat in purus ornare quis blandit tortor suscipit. Cras in lectus eu eros mattis euismod. Quisque ligula ipsum, ornare sed tristique sit amet, sollicitudin id nisl. Maecenas eget mi felis. Aenean felis lorem, posuere nec sollicitudin eget, semper eget magna. Quisque interdum, sem at dignissim pretium, arcu erat imperdiet velit, at convallis libero nisi eget lorem. Nam arcu dui, cursus eget malesuada eu, scelerisque vitae massa. Suspendisse nec turpis in urna mattis consequat vitae a odio. Sed varius, tellus convallis porttitor dignissim, quam justo luctus augue, non scelerisque turpis magna eu augue. In hac habitasse platea dictumst. Nulla laoreet, sem et pharetra porttitor, libero ipsum porta ligula, et pulvinar turpis dolor nec leo. Curabitur hendrerit rutrum sapien, quis tincidunt erat vulputate in. In arcu elit, venenatis quis egestas nec, pharetra eget arcu. Donec lobortis imperdiet odio vel aliquam. Nam adipiscing rutrum orci, vel pretium risus mattis nec. In quam massa, viverra non venenatis quis, laoreet vel justo. Phasellus eget sapien ac massa consectetur malesuada et sed lacus. Nullam tempus iaculis egestas. Morbi viverra lobortis est nec dapibus. Donec at purus vel nulla commodo dignissim. In eget urna orci. Curabitur id augue ut urna convallis imperdiet. Proin justo urna, convallis et mollis nec, scelerisque id risus. Mauris lacinia ante vitae odio auctor ornare. Phasellus vehicula tempor felis, ac ullamcorper metus malesuada nec. Sed fringilla fringilla lobortis. Morbi bibendum, tortor sed rutrum lobortis, sem...

CSS

.card {
    height: 50px;
    width: 50px;
    position:relative;
    display: inline-block;
    margin: 10px;
    transform-style: preserve-3d;
    transition: all 3s ease;
}
.card:focus {
    position:relative;
    transition:all 2s;
    transform: rotateY(180deg);
}
.front, .back {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
}
.front {
    background-color: red;
}
.back {
    background-color: blue;
    transform: rotateY(180deg);
}

JavaScript

$('.card').focusin(function () {
    var tc = $(window).height() / 2 - $('.card').height() / 2;
    var lc = $(window).width() / 2 - $('.card').width() / 2 - $(this).offset().left;

    $(this).animate({
        left: lc,
        top: tc
    });
});

$('.card').focusout(function () {
    $(this).animate({
        top: 0,
        left: 0
    });
});