آموزش CSS 3 > سایر خواص در CSS 3 > خاصیت backface-visibility

خاصیت backface-visibility :

خاصیت backface-visibility یک مقدار Boolean را تعیین می کند که آیا قسمت پشت یک عنصر در هنگام چرخش سه بعدی نمایش داده شود یا خیر . به عبارت دیکر زمانی که عنصر پشت به صفحه است مخفی باشد یا نمایان . اگر مقدار Visibleباشد عنصر نمایش داده شده و اگر مقدار Hidden باشد عنصر نمایش داده نمی شود .

مقدار پیش فرض خاصیت visible است .

شکل کلی استفاده از این خاصیت به صورت زیر است :

Syntax backface-visibility : visible | hidden ;

خاصیت  backface-visibility می تواند دارای یکی از 2 مقدار زیر باشد :

backface-visibility  موارد مختلف خاصیت
توضیح مقدار
در این حالت پشت عنصر نمایش داده می شود .
مقدار پیش فرض است .
visible
در این حالت ، پشت عنصر نمایش داده نمی شود . hideen

پشتیانی در مرورگر های مختلف :

   

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

کد لازم برای پشتیانی نوع مرورگر
باید به صورت 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>
کد
خروجی


راجع این مطلب سوال یا اشکالی دارید ؟! آن را در انجمن سایت مطرح نمایید ...         >>>>>  ورود به انجمن تخصصی


نظر خودتان درباره این صفحه را با ما در میان بگذارید :

آیا مطالب این صفحه برای شما مناسب و مفید بوده است :

نام :                 
آدرس Email :    
 
نظر شما :  
 
سوال امنیتی : پایتخت ایران ؟