body {
    background: linear-gradient(rgb(1, 1, 50), rgb(1, 1, 10));
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}
.card {
    position: relative;
    width: 200px;
    height: 300px;
    transform-style: preserve-3d;
    transform: perspective(2500px);
    transition: 3s;
}
.card .front {
    position: relative;
    background: linear-gradient(rgb(0, 0, 139), rgb(255, 255, 255));
    border: rgb(255, 255, 255) 10px solid;
    width: 200px;
    height: 300px;
    overflow: hidden;
    transform-origin: left;
    transition: 0.3s;
}
.card .inside {
    position: absolute;
    background: linear-gradient(rgb(0, 0, 139), rgb(255, 255, 255));
    border: rgb(255, 255, 255) 10px solid;
    width: 200px;
    height: 300px;
    z-index: -1;
    left: 0;
    top: 0;
}
input#open {
    display: none;
}
.open {
    position: absolute;
    top: 0;
    left: 0;
    height: 300px;
    width: 200px;
    background-color: transparent;
    z-index: 6;
    cursor: pointer;
}
#open:checked ~ .front {
    background: linear-gradient(rgb(0, 0, 139), rgb(255, 255, 255));
    transform: rotateY(-180deg);
}
#open:checked ~ .front .content {
    display: none;
}