• HTML
• CSS

HTML

<div class="card">
    <div class="face front">
        <h2>Front</h2>
    </div>
    <div class="face back">
        <h2>Back</h2>
    </div>
</div>

CSS

@import url('https://fonts.googleapis.com/css?family=Poppins:400,500,600,700&display=swap');
*{
    margin:0;
    padding:0;
    font-family:'Poppins',sans-serif;
}
body
{
    width:100%;
    height:100vh;
    display:flex;
    justify-content:center;
    align-items:center;
    background:#111;
}
.card
{
    position:relative;
    width:300px;
    height:400px;
    transform-style:preserve-3d;
}
.card .face
{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    transform-style:preserve-3d;
    display:flex;
    justify-content:center;
    align-items:center;
    backface-visibility:hidden;
    transition:2s ease-in-out;
    transform:perspective(500px) rotateY(0deg);
}
.card .face.front
{
    background:#ff0;
}
.card:hover .face.front
{
    transform:perspective(500px) rotateY(180deg);
}
.card .face.back
{
    background:#3bc2ff;
    color:#fff;
    transform:perspective(500px) rotateY(180deg);
}
.card:hover .face.back
{
    transform:perspective(500px) rotateY(360deg);
}
.card .face h2
{
    font-size:4em;
    text-transform:uppercase;
    transform:perspective(500px) translateZ(50px);
}

/*
    All the credits: https://www.youtube.com/watch?v=aDmRB3V_RdE
*/