При наведении карты (html и css) происходит сбой ⇐ Html

[Anonymous]

https://kraker52.github.io/Flipping-Card/
Вот ссылка на мини-проект, который я сделал (я не думаю, что вы, ребята, даже сочтете его мини). Проблема в том, что вы пытаетесь медленно или быстро навести на него снаружи внутрь, но замедляете его внутри. Я попробовал разобраться в этом и спросил ChatGPT, но ответов не получил. Ребята, в чем, по вашему мнению, может быть проблема?

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

Bank Card







Master Card



Card Number
1234 5678 9012 3456
Krish Sanjay Mishra

Valid Thru
12/24




 For consumer service call +977 4343 3433 or email at  mastercard@gmail.com 



987


By signing this card, the cardholder agrees to comply with the terms and conditions of the Cardholder Agreement.  If found, please return to your issuing bank.

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

* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

body {
font-family: Arial, sans-serif;
background-color: #121320;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}

.gradient {
height: 200px;
width:200px;
border-radius: 50%;
background: linear-gradient(90deg , violet , violet , white);
position: relative;
left: 120px;
bottom: 100px;
z-index: -1;
}

.revgradient {
height: 200px;
width:200px;
border-radius: 50%;
background: linear-gradient(90deg , white , violet , violet);
position: relative;
right: 120px;
top: 100px;
z-index: -1;
}

.container {
position: relative;
width: 370px;
max-width: 100%;
z-index: 100;
transition: 0.3s ease;
transform-style: preserve-3d;
}

.container:hover {
transform: rotateY(180deg);
}

.card {
height: 225px;
width: 370px;
background-color: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(25px);
border-radius: 25px;
padding: 20px;
z-index: 0;
display: flex;
flex-direction: column;
backface-visibility: hidden;
}

.cardback {
transform: rotateY(180deg);
height: 225px;
width: 370px;
background-color: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(25px);
border-radius: 25px;
padding: 20px;
display: flex;
flex-direction: column;
position: absolute;
inset: 0;
backface-visibility: hidden;
}

.top {
flex: 1.5;
}

.space {
flex: 0.5;
}

.bottom {
display: flex;
flex: 3;
}

.chip {
height: 60px;
width: 100px;
position: relative;
left: 60px;
bottom: 5px;
}

.logo {
height: 45px;
width: 66px;
position: relative;
bottom: 10px
}

.text {
color: white;
font-size: 17px;
position: relative;
bottom: 28px;
left: 10px;
}

.right {
text-align: center;
color: white;
position: relative;
top: 50px;
left: 60px;
}

.cardback span {
white-space: nowrap;
}

.blackstrip {
height: 50px;
width: 370px;
background-color: black;
position: relative;
top: 15px;
right: 20px;
}

.whitestrip {
height: 40px;
width: 270px;
background-color: white;
position: relative;
top: 35px;
border-radius: 5px;
}

.cvv {
background-color: white;
height: 30px;
width: 40px;
position: relative;
left: 265px;
top: 5px;
font-size: 14px;
border-radius: 5px;
}

.cvv em {
color: black;
position: relative;
left : 10px;
top: 7px;
}

.dummy {
color: white;
position: relative;
top: 50px;
font-size: 11px;
white-space: inherit;
}

Я пытался сделать карточку, которая переворачивается при наведении.

Подробнее здесь: https://stackoverflow.com/questions/797 ... -glitching