با عرض سلام و خسته نباشید خدمت اعضای محترم انجمن خصوصا استاد صالحی عزیز خواستم درک خودم از 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 کردن به پشت می‌چرخد.

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