درک بهتر آنچه در فلیپ کارت ها اتفاق می افتد

با عرض سلام و خسته نباشید خدمت اعضای محترم انجمن خصوصا استاد صالحی عزیز خواستم درک خودم از hidenکردن  backface-visibility برای عناصرمختلف رو به اشتراک بگذارم

چیزی که من در خصوص بحث flip-card ها متوجه شدم اینه که زمانی برای عنصری backface-visibility رو برابر hidden قرار می دهید و اون عنصر رو 180deg می چرخونیم دیگه اون عنصر قابل رویت نیست. در واقع پشت عنصر رو hidden می کنیم.

 در بحث flip-cardها هم درواقع ما دو box داریم که با تگ div طراحی کرده ایم و روی هم شناور شده اند. در ابتدای کار پشت یکی را hidden می کنیم:

.filp-card-back,.flip-card-front{
Backface-visibility:hidden;
}
.flip-card-back{ 
	Transform:rotatey(180deg);
}

به این ترتیب یکی از boxها که درواقع چرخیده نمایش داده نمی شود (همان boxی که حاوی متن است). این در حالی است که boxی  که حاوی imag می باشد قابل رویت است. چون درست است که با توجه به کد فوق پشت آن را غیر قابل رویت کرده ایم اما این boxهنوز به رو است و درواقع 180deg نچرخیده. پس تا اینجای کار یک box به رو است که حاوی imag است و یک box به پشت است که حاوی متن است.

در مرحله بعد با hover کردن flip-card عنصر flip-card-inner را می چرخونیم و از اونجایی که این عنصر والد دو box فوق می باشد پس در واقع دو box  فوق هر کدوم به روی دیگر می چرخند.

.flip-card:hover  .flip-card-inner{
	Transform:rotatey(180deg);
}

بنابراین همزمان box حاوی imag به پشت قرار می گیرد و box حاوی متن به رو. اما چیزی در مجموع به نظر می رسد این است که یک عکس داریم که با hover کردن به پشت می چرخد.

در پایان ممنون میشم اگه اشتباهی داشتم متذکر شوید.