ویژگی backface-visibility تعیین می کند زمانی که عنصر در فضای سه بعدی توسط ویژگی transform حرکت داده می شود پشت آن قابل مشاهده توسط بیننده باشد یا نه.
در حالت پیشفرض اگر عنصری در فضای سه بعدی بچرخد پشت آن عنصر نیز قابل مشاهده است اما اگر مقدار hidden را برای این ویژگی تنظیم کنیم, دیگر پشت آن عنصر دیده نخواهد شود.
backface-visibility: visible; /* حالت پیشفرض */
/* یا */
backface-visibility: hidden;
در تصویر زیر عنصر سمت راست مقدار پیشفرض یعنی visible را دارد و برای عنصر سمت چپ مقدار hidden تنظیم شده است:
نکته مهم: اینکه می گوییم پشت عنصر دیده شود یا نه. منظور پشت خود عنصر است نه آنچه که در پشت سر عنصر قرار دارد.
از نمونه هایی که این ویژگی در آنها کاربرد دارد می توان ساخت کارت های دو طرفه و معکب هایی که جداره های شیشه ای دارند را نام برد.
در دموی زیر با زدن دکمه تغییر وضعیت این ویژگی و همینطور با بررسی کد به درک بهتر موضوع کمک کنید:
See the Pen JXOVQv by Mojtaba Seyedi (@seyedi) on CodePen.
پشتیبانی مرورگر ها
ویژگی backface-visibility در کروم و سافاری, اندروید و iOS و (اپرا نسخه 15 به بالا) پشتیبانی می شود (از -webkit- به عنوان پیشوند استفاده می شود). همچنین در فایرفاکس 10 به بالا, در اینترنت اکسپلورر 10 به بالا نیز این ویژگی پشتیبانی می شود.
سلام خسته نباشین
دموی این مبحث کار نمیکنه لطفا بررسی کنید
ممنون
سلام، ممنون درست شد.
خیلی باحال بود.