ویژگی backface-visibility در css سه بعدی 1401

در این مقاله از سایت آموزی جهت استفاده شما همراهان گرامی قصد داریم در مورد ویژگی backface-visibility در css توضیحاتی را ارائه نماییم. ویژگی کاربردی backface-visibility در زبان css به تازگی در آخرین نسخه این زبان طراحی یعنی CSS3 معرفی شده است.

معرفی و کاربرد ویژگی جدید backface-visibility در زبان طراحی css

خاصیت backface-visibility تعیین می کند زمانی که تگ html در فضای سه بعدی توسط ویژگی transform حرکت داده می شود، توسط بیننده پشت آن قابل مشاهده باشد یا خیر.

در حقیقت به طور پیش فرض اگر یک تگ html در فضای سه بعدی بچرخد پشت آن تگ html قابل مشاهده است. اما اگر مقدار hidden را برای خصوصیت backface-visibility تنظیم کنیم، دیگر پشت آن عنصر html دیده نخواهد شود.

مقادیر ویژگی backface-visibility در css

صفت جدید backface-visibility که در زبان طراحی CSS3 معرفی شده است، 4 مقدار می پذیرد که عبارتند از:

مقدار visible
مقدار hidden
مقدار initial
مقدار inherit

مقدار visible درون خاصیت backface-visibility در زبان css

اگر خاصیت backface-visibility را برابر با مقدار visible قرار دهیم، تگ html را که توسط ویژگی transform سه بعدی شده است، مانند حالت پیش فرض پشت آن را نشان می دهد.

مقدار hidden درون ویژگی backface-visibility در css

اگر خاصیت backface-visibility را برابر با یک مقدار hidden قرار دهیم، تگ html را که توسط ویژگی transform سه بعدی شده است، برخلاف حالت پیش فرض پشت آن تگ html را در فضای سه بعدی نمایش نمی دهد.

مقدار initial درون خاصیت backface-visibility در زبان css

اگر خاصیت backface-visibility را برابر با مقدار initial تعریف کنیم، در حقیقت همان مقدار پیش فرض این خصوصیت برای تگ html مورد نظر اعمال می شود.

مقدار inherit درون خاصیت backface-visibility در زبان سی اس اس

اگر خاصیت backface-visibility را برابر با مقدار inherit تعریف کنیم، در واقع تگ html مربوطه ، خصوصیت مذکور را از والد پدری خود به ارث می برد.

مثال در مورد ویژگی backface-visibility در css

#div1 {backface-visibility: hidden;}

#div2 {backface-visibility: visible;}

بررسی خاصیت backface-visibility از نظر نسخه زبان طراحی سی اس اس

ویژگی کاربردی backface-visibilityدر زبان css به تازگی و در آخرین نسخه این زبان طراحی یعنی css3 معرفی شده است.

برای متخصص شدن در طراحی سایت فروشگاهی با وردپرس روی لینک زیر کلیک کن و تو دوره ثبت نام کن:

دوره فوق حرفه ای طراحی سایت فروشگاهی با وردپرس پروژه محور

برای متخصص شدن در طراحی بخش Front End سایت روی لینک زیر کلیک کن و تو دوره ثبت نام کن:

دوره فوق حرفه ای آموزش طراحی سایت با HTML5 و CSS3 و Bootstrap و jQuery

بررسی ساختاری ویژگی backface-visibility در css


عناوین ساختاری خاصیت backface-visibility	وضعیت ساختاری خاصیت backface-visibility
مقدار پیش فرض	visible
قابلیت توارث	ندارد
قابلیت تحرک	ندارد
ورژن css صفت	CSS3
سینتکس صفت در جاوا اسکریپت	"object.style.backfaceVisibility="hidden