SOURCE

let boxWrapper = document.getElementById('box-wrapper');
let box = document.getElementById('box');

boxWrapper.addEventListener('mouseenter', () => {
    box.className = 'box active';
});
boxWrapper.addEventListener('mouseleave', () => {
    box.className = 'box';
});

<div class="box-wrapper" id="box-wrapper">
	<div class="box" id="box">
		<div class="item front">Front</div>
		<div class="item back">Back</div>
	</div>
</div>

* {
    margin: 0;
    padding: 0;
}

html,
body {
    width: 100%;
    height: 100%;
}

.box-wrapper {
    width: 300px;
    height: 500px;
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    cursor: pointer;
    overflow: hidden;
    border-radius: 10px;
    box-sizing: border-box;
}

.box {
    width: 100%;
    height: 100%;
    transition: all .35s linear;
    perspective: 1200px;
    transform-style: preserve-3d;
    position: rela1tive;
}

.box .item {
    width: 100%;
    height: 100%;
    font-size: 60px;
    font-weight: 700;
    text-align: center;
    position: absolute;
    left: 0;
    top: 0;
    backface-visibility: hidden;
}

.front {
    background: red;
}

.back {
    background: pink;
    transform: rotateY(180deg);
}

.box.active {
    transform: rotateY(180deg);
}