.card3 {
    position: relative;
    height: 350px;
    cursor: pointer;
}

.card-front,
.card-back {
    position: absolute;
    width: 100%;
    height: 100%;
    transition: transform 1s cubic-bezier(0.4, 0.0, 0.2, 1);
    backface-visibility: hidden;
}

.card-back {
    transform: rotateY(180deg);
}

.card3:hover .card-front {
    transform: rotateY(180deg);
}

.card3:hover .card-back {
    transform: rotateY(0);
}

.card-back {
-   transform: rotateY(180deg);
+   transform: rotateY(180deg) rotateZ(50deg);
}

.card3:hover .card-front {
-   transform: rotateY(180deg);
+   transform: rotateY(180deg) rotateZ(50deg);
}

.card3:hover .card-back {
-   transform: rotateY(0);
+   transform: rotateY(0) rotateZ(0);
}