الخاصية backface-visibility
الخاصية backface-visibility
في CSS تُحدِّد فيما إذا كان الوجه الخلفي للعنصر ظاهرًا للمستخدم، ويكون الوجه الخلفي للعنصر ذو خلفيةٍ شفافة، ويسمح بعرض صورة معكوسة (mirrored) للوجه الأمامي للعنصر.
/* كلمات محجوزة */
backface-visibility: visible;
backface-visibility: hidden;
/* القيم العامة */
backface-visibility: inherit;
backface-visibility: initial;
backface-visibility: unset;
هنالك حالات لا نريد فيها إظهار الوجه الأمامي للعنصر معكوسًا على الوجه الخلفي، كما في تأثير قلب البطاقات. لاحظ أنَّ هذه الخاصية لن يكون لها أكثر على العناصر ثنائية البعد التي ليس لها منظور perspective
.
القيمة الابتدائية | visible
|
---|---|
تُطبَّق على | جميع العناصر. |
قابلة للوراثة | لا |
قابلة للتحريك | لا |
القيمة المحسوبة | كما حُدِّدَت. |
أمثلة
مثال يوضح تأثير قيمة الخاصية backface-visibility
على إظهار الوجه الخلفي للعناصر في الفضاء ثلاثي الأبعاد:
<table>
<tbody>
<tr>
<th><code>backface-visibility: visible;</code></th>
<th><code>backface-visibility: hidden;</code></th>
</tr>
<tr>
<td>
<div class="container">
<div class="cube showbf">
<div class="face front">1</div>
<div class="face back">2</div>
<div class="face right">3</div>
<div class="face left">4</div>
<div class="face top">5</div>
<div class="face bottom">6</div>
</div>
</div>
<p>
جميع الأوجه شفافة وستظهر الأوجه الخلفية عبر الأوجه الأمامية
</p>
</td>
<td>
<div class="container">
<div class="cube hidebf">
<div class="face front">1</div>
<div class="face back">2</div>
<div class="face right">3</div>
<div class="face left">4</div>
<div class="face top">5</div>
<div class="face bottom">6</div>
</div>
</div>
<p>
لا توجد أوجه شفافة، ولن تظهر الأوجه الخلفية للعناصر الثلاثة الأخرى
</p>
</td>
</tr>
</tbody>
</table>
شيفرة CSS:
.hidebf div {
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
}
.showbf div {
backface-visibility: visible;
-webkit-backface-visibility: visible;
}
.container {
width: 150px;
height: 150px;
margin: 75px 0 0 75px;
border: none;
}
.cube {
width: 100%;
height: 100%;
perspective: 550px;
perspective-origin: 150% 150%;
transform-style: preserve-3d;
-webkit-perspective: 300px;
-webkit-perspective-origin: 150% 150%;
-webkit-transform-style: preserve-3d;
}
.face {
display: block;
position: absolute;
width: 100px;
height: 100px;
border: none;
line-height: 100px;
font-family: sans-serif;
font-size: 60px;
color: white;
text-align: center;
}
.front {
background: rgba(0, 0, 0, 0.3);
transform: translateZ(50px);
-webkit-transform: translateZ(50px);
}
.back {
background: rgba(0, 255, 0, 1);
color: black;
transform: rotateY(180deg) translateZ(50px);
-webkit-transform: rotateY(180deg) translateZ(50px);
}
.right {
background: rgba(196, 0, 0, 0.7);
transform: rotateY(90deg) translateZ(50px);
-webkit-transform: rotateY(90deg) translateZ(50px);
}
.left {
background: rgba(0, 0, 196, 0.7);
transform: rotateY(-90deg) translateZ(50px);
-webkit-transform: rotateY(-90deg) translateZ(50px);
}
.top {
background: rgba(196, 196, 0, 0.7);
transform: rotateX(90deg) translateZ(50px);
-webkit-transform: rotateX(90deg) translateZ(50px)
}
.bottom {
background: rgba(196, 0, 196, 0.7);
transform: rotateX(-90deg) translateZ(50px);
-webkit-transform: rotateX(-90deg) translateZ(50px);
}
th, p, td {
background-color: #EEEEEE;
margin: 0px;
padding: 6px;
font-family: sans-serif;
text-align: left;
}
دعم المتصفحات
الميزة | Chrome | Firefox | Internet Explorer | Opera | Safari |
---|---|---|---|---|---|
الدعم الأساسي | 12.0 (مع السابقة -webkit- )
45.0 |
10.0 (مع السابقة -moz- )
16.0 |
10 | 15 (مع السابقة -webkit- )
23 |
3.1 (مع السابقة -webkit- )
9.0 |
البنية العامة
تقبل الخاصية backface-visibility
كلمةً محجوزةً من الكلمتين التاليتين.
القيمة visible
هذه الكلمة المحجوزة تعني أنَّ الوجه الخلفي للعنصر ظاهر، وسيعرض الوجه الأمامي مقلوبًا (mirrored).
هذه الكلمة المحجوزة تعني أنَّ الوجه الخلفي للعنصر ليس ظاهرًا.
البنية الرسمية
backface-visibility: visible | hidden;
مصادر ومواصفات
- مسودة CSS Transforms Level 2.