css flip card

[nova smelt]

why is the flipping like this?

form {
    width: 350px;
    background-color: var(--overlay);
    border-radius: 8px;
    padding: 10px 0;
    border: 1px solid red;
}
.card {
    height: 100%;
    width: 100%;
    position: relative;
    transition: transform 1s ease;
    transform-style: preserve-3d;
}
.back {
    transform: rotateY(180deg);
    position: absolute;
    backface-visibility: hidden;
    top: 0;
}
.front, .back {
    height: 100%;
    width: 100%;
}
form:hover .card {
    transform: rotateY(180deg);
}

[fossil glacier]

I think you need to look into the backface visibility property.

[nova smelt]

the backface is set correctly, i checked it

[nova smelt]

i moved it here from .back to .back, .front

[fossil glacier]

Right. I would imagine that is the issue and having it on both back and front should solve it or at least change something. Have you tried it on a different browser yet? What happens if backface visibility hidden is only on the front class?

[mystic bluff]

Could it be because of the form:hover .card property? When the card rotates 180, the .back loses its hidden visibility?

[nova smelt]

mroning

idk how this works, but fixed it by hiding the backface visibility of .card

[nova smelt]

if its only hidden in front class, then both front and back will always be shown

found out it should be hidden on .back and .card