آموزش CSS 3 > سایر خواص در CSS 3 > خاصیت backface-visibility
خاصیت backface-visibility :
خاصیت backface-visibility یک مقدار Boolean را تعیین می کند که آیا قسمت پشت یک عنصر
در هنگام چرخش سه بعدی نمایش داده شود یا خیر . به عبارت دیکر زمانی که عنصر پشت به
صفحه است مخفی باشد یا نمایان . اگر مقدار Visibleباشد عنصر نمایش داده شده و اگر مقدار
Hidden باشد عنصر نمایش داده نمی شود .
مقدار پیش فرض خاصیت visible است .
شکل کلی استفاده از این خاصیت به صورت زیر است :
|
Syntax
|
backface-visibility : visible | hidden ;
|
خاصیت backface-visibility می تواند دارای یکی از 2 مقدار زیر باشد :
|
توضیح
|
در این حالت پشت عنصر نمایش داده می شود .
مقدار پیش فرض است .
|
|
در این حالت ، پشت عنصر نمایش داده نمی شود .
|
پشتیانی در مرورگر های مختلف :
اکثر مرورگر های مطرح به جز اکسپلورر و اپرا به صورت عادی از این خاصیت پشتیانی می
کنند .
|
باید به صورت moz-backface-visibility- نوشته شود .
|
|
پشتیانی نمی شود .
|
|
پشتیانی نمی شود .
|
|
باید به صورت webkit-backface-visibility- نوشته شود .
|
مثال :
در مثال زیر دو تگ < div > داریم . هر دو تگ را 180 در جه چرخانده و اکنون پشت
آنها به کاربر است . در تگ اول ، مقدار خاصیت backface-visibility برابر با visible
بوده و در تگ دوم مقدار آن برابر hidden تنظیم شده است . بنابراین تگ دوم باید
نمایش داده نشده و مخفی باشد :
< html >
< head >
< style >
div
{
position:relative;
height:60px;
width:60px;
background-color:red;
transform:rotateY(180deg);
-webkit-transform:rotateY(180deg);
/* Chrome and Safari */
-moz-transform:rotateY(180deg);
/* Firefox */
}
#div1
{
-webkit-backface-visibility:hidden;
-moz-backface-visibility:hidden;
}
#div2
{
-webkit-backface-visibility:visible;
-moz-backface-visibility:visible;
}
< /style >
</head>
<body>
<div id="div1"> DIV 1</div>
<div id="div2"> DIV 2</div>
</body>
</html>
|
|
|
راجع این مطلب
سوال یا اشکالی دارید ؟! آن را در انجمن سایت مطرح نمایید ...
>>>>> ورود به انجمن تخصصی
نظر خودتان درباره این صفحه را با ما در میان بگذارید :