Card flip and zoom

I've been making this site and my goal is to make simple card grid with bootstrap. That's done. Next I want those cards flip and zoom with click. That's almost done. When I click the card it doesn't open from that place where the card is but instead it jumps around the screen before it opens. I also want the open card to close when I click outside of the open card.

Here's what I've done so far: Sample

.element-card {
transform-style: preserve-3d;
transform: rotatey(0deg) translatex(0px) translatey(0px);
transition: all 0.9s cubic-bezier(0.68, -0.55, 0.265, 1.55);
box-shadow: 4px 4px 20px rgba(0, 0, 0, 0.4);
cursor: pointer;
margin-bottom: 20px;}

.element-card.open {
position: fixed;
transform: rotatey(-180deg) translate(50%, -50%);
top: 50%;
left: 50%;
width: 70vw;
height: 90%;
z-index: 500;
cursor: auto;
}

.element-card .front-facing {
transform: rotateY(0deg) translateZ(2px);
position: relative;
background-color: #ffffff;
border: 1px #666666 solid;
border-radius: 0px;
height: 100%;
}

.element-card .back-facing {
transform: rotateY(180deg) translateZ(0px);
justify-content: center;
align-items: center;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
background-color: #ffffff;
border: 1px #666666 solid;
border-radius: 0px;
padding: 20px;
text-align: center;
overflow: hidden;
}

 $(document).ready(function() {

        $('.element-card').on('click', function() {

            if ($(this).hasClass('close')) {
                $(this).removeClass('open');
            } else {
                $('.element-card').removeClass('open');
                $(this).addClass('open');
            }

        });

    });
    $(document).on('click', ".element-card .close", function() {
        $(".element-card").removeClass('open');
    });