CSS/backface-visibility

الخاصية backface-visibility في CSS تُحدِّد فيما إذا كان الوجه الخلفي للعنصر ظاهرًا للمستخدم، ويكون الوجه الخلفي للعنصر ذو خلفيةٍ شفافة، ويسمح بعرض صورة معكوسة (mirrored) للوجه الأمامي للعنصر.

بطاقة الخاصية

القيمة الابتدائية	visible
تُطبَّق على	جميع العناصر.
قابلة للوراثة	لا
قابلة للتحريك	لا
القيمة المحسوبة	كما حُدِّدَت.

/* كلمات محجوزة */
backface-visibility: visible;
backface-visibility: hidden;

/* القيم العامة */
backface-visibility: inherit;
backface-visibility: initial;
backface-visibility: unset;

هنالك حالات لا نريد فيها إظهار الوجه الأمامي للعنصر معكوسًا على الوجه الخلفي، كما في تأثير قلب البطاقات. لاحظ أنَّ هذه الخاصية لن يكون لها أكثر على العناصر ثنائية البعد التي ليس لها منظور perspective.

أمثلة

مثال يوضح تأثير قيمة الخاصية 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).

hidden

هذه الكلمة المحجوزة تعني أنَّ الوجه الخلفي للعنصر ليس ظاهرًا.

البنية الرسمية

backface-visibility: visible | hidden;

مصادر ومواصفات

• مسودة CSS Transforms Level 2.