flip card wariuje

Question

Cześć,

Próbuję zrobić popularną flip card. Kod zamieszczam poniżej. Gdy najadę myszką na środek karty - wszystko działa poprawnie. Niestety, gdy najeżdżam na bok karty - zamiast obrócić się w całości, obraca się jedynie do tej części, gdzie znajduje się myszka i miga....

Czy potrafi ktoś wskazać przyczynę ?

HTML

		<div class="cardcontainer">
			<div class="card">
				<div class="front">front</div>
				<div class="back">back</div>
			</div>
		</div>

CSS

.cardcontainer
{
	width:250px;
	height:320px;
	position:relative;
}

.card
{
	width:100%;
	height:100%;
	transform-style: preserve-3d;
	transition: all 0.2s ease;
	position:absolute;
}

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

.front
{
	position:absolute;
	width:100%;
	height:100%;
	backface-visibility:hidden;
	background:orange;
}

.back
{
	position:absolute;
	width:100%;
	height:100%;
	backface-visibility:hidden;
	background:black;
	transform:rotateY(180deg);
	color:white;
}

 

Answer 1

Ponieważ .card jest obracana, gdy :hover

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

i w czasie obrotu "ucieka" spod wskaźnika myszy, co wywołuje odwrócenie obrotu, bo

.card
{
    ...
    transition: all 0.2s ease;
    position:absolute;
}

i znowu .card znajduje się w zasięgu wskaźnika myszy, co powoduje znowu :hover i ten stan się "zapętla" co powoduje efekt "migotania"

np. ten zapis powinien zaradzić

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

 

Comments

Naturalnie - pomogło :) Dziękuję