Элемент карты в CSS не переворачивается должным образом при использовании свойства backface-visibility. ⇐ CSS

[Anonymous]

Это HTML-код:

Код: Выделить всё

section {
display: flex;
margin: 0;
padding: 0;
justify-content: center;
align-items: center;
min-height: 100vh;
}

.card-item__side {
border: 1px solid black;
width: 350px;
height: 200px;
display: flex;
justify-content: center;
align-items: center;
}

.card-item {
position: relative;
transform-style: preserve-3d;
}

.front {}

.back {
position: absolute;
top: 0;
left: 0;
transform: rotateY(-180deg);
}

.card-item__side {
backface-visibility: hidden;
}

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

Код: Выделить всё

Here is the information
Flip the card




The card is flipped

Поэтому, когда я пытаюсь навести курсор на карточку на ее лицевой стороне, мне показывается содержимое обратной стороны, включая содержимое лицевой стороны зеркально отображается (вместо исчезновения лицевой стороны, как я ожидал, когда использовал свойство backface-visibility. В чем проблема и как ее решить?
Возможно, проблема связана с HTML разметке, элементы расположены неправильно?

Подробнее здесь: https://stackoverflow.com/questions/787 ... ibility-pr