<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>3D FLIPPING EFFECT</title>
    <link href="https://fonts.googleapis.com/css?family=Cinzel" rel="stylesheet">
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="card">
        <div class="card__content">
            <div class="card__front">
                <div class="card__border">
                    <p class="card__subtitle">Infinite possibilities. </p>
                    <h3 class="card__title">Space</h3>                    
                </div>
            </div>
            <div class="card__back">
                <p class="card__body">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ducimus fuga maxime, debitis id quo nostrum ullam voluptas eos culpa placeat!</p>
            </div>
        </div>
    </div>
</body>
</html>
:root {
    --level-one: translateZ(3rem);
    --level-two: translateZ(6rem);
    --level-three: translateZ(9rem);

    --fw-normal: 400;
    --fw-bold: 700;
}

*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
}

body {
    height: 100vh;
    display: grid;
    place-items: center;
    font-family: 'Cinzel', serif;
    background-color: lightslategray;
}

.card {
    width: 400px;        
}

.card:hover .card__content {
    transform: rotateY(180deg);      
}

.card__content {
    text-align: center;
    position: relative;
    padding: 15em 3em;
    background: pink;
    transition: transform 3s;
    transform-style: preserve-3d;
}

.card__front,
.card__back {
    color: #fff;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 2em;
    transform-style: preserve-3d;
    backface-visibility: hidden;
    display: grid;
    align-content: center;
}

.card__front {
    background-color: rgb(109, 66, 133);
    background-image: url(https://images.unsplash.com/photo-1516571748831-5d81767b788d?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=5a29d44f8c78ba3da0e00af9c60de1a3&auto=format&fit=crop&w=334&q=80);
    background-repeat: no-repeat;
    background-size: cover;
    background-position-y: center;
    background-blend-mode: overlay;
}

.card__front::before {
    content: '';
    color: #fff;    
    position: absolute;
    --spacer: 1em;
    top: var(--spacer);
    bottom: var(--spacer);
    left: var(--spacer);
    right: var(--spacer);
    border: 3px solid currentColor;
    transform: var(--level-one);
}

.card__title {
    font-size: 3.5rem;
    transform: var(--level-three);
    text-transform: uppercase;
    text-shadow: 0 0 0.5rem #000;
}

.card__subtitle {
    transform: var(--level-two);
    text-transform: uppercase;
    letter-spacing: 4px;
    font-size: .75rem;
    font-weight: var(--fw-bold);
    opacity: 0.7;
}

.card__body {    
    transform: var(--level-two);   
    font-weight: var(--fw-normal);
    font-size: 1.5rem;
    line-height: 1.6;
}

.card__back {
    transform: rotateY(180deg);
    background: radial-gradient(ellipse at top, #0E0A2F, #513493 50%, #6d4285 75%, #0e0d0d 75%),
                radial-gradient(ellipse at bottom, #6d4285, transparent);
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.