.hover-effect__wrapper {
    height: 0;
    padding-bottom: 100%;
    display: block;
    position: relative;
}

.hover-effect__el {
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    display: block;
    position: absolute;
    transition: transform 0.46s cubic-bezier(0.7, 0, 0.3, 1);
}

.hover-effect__wrapper:hover .hover-effect__el--default {
    transform: rotateY(-0.5turn);
}

.hover-effect__wrapper:hover .hover-effect__el--hover {
    transform: rotateY(0turn);
}

.hover-effect__el--default {
    transform: rotateY(0turn);
}

.hover-effect__el--hover {
    transform: rotateY(0.5turn);
}