الفرق بين المراجعتين ل"CSS/backface-visibility"

مراجعة 13:16، 19 أغسطس 2018

الخاصية 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.

@@ سطر 1: / سطر 1: @@
 <noinclude>{{DISPLAYTITLE:الخاصية <code>backface-visibility</code>}}</noinclude>
-الخاصية <code>backface-visibility</code> في CSS تُحدِّد فيما إذا كان الوجه الخلفي للعنصر ظاهرًا للمستخدم، ويكون الوجه الخلفي للعنصر ذو خلفيةٍ شفافة، ويسمح بعرض صورة معكوسة (mirrored) للوجه الأمامي للعنصر.<nowiki/><syntaxhighlight lang="css">
+الخاصية <code>backface-visibility</code> في CSS تُحدِّد فيما إذا كان الوجه الخلفي للعنصر ظاهرًا للمستخدم، ويكون الوجه الخلفي للعنصر ذو خلفيةٍ شفافة، ويسمح بعرض صورة معكوسة (mirrored) للوجه الأمامي للعنصر.
-/* كلمات محجوزة */
-backface-visibility: visible;
-backface-visibility: hidden;
-/* القيم العامة */
+== بطاقة الخاصية ==
-backface-visibility: inherit;
-backface-visibility: initial;
-backface-visibility: unset;
-</syntaxhighlight>هنالك حالات لا نريد فيها إظهار الوجه الأمامي للعنصر معكوسًا على الوجه الخلفي، كما في تأثير قلب البطاقات. لاحظ أنَّ هذه الخاصية لن يكون لها أكثر على العناصر ثنائية البعد التي ليس لها منظور <code>[[CSS/perspective|perspective]]</code>.
 {| class="wikitable" style="width: 100%;"
 |-
@@ سطر 26: / سطر 19: @@
 ! scope="row" |القيمة المحسوبة
 |كما حُدِّدَت.
-|}
+|}<syntaxhighlight lang="css">
+/* كلمات محجوزة */
+backface-visibility: visible;
+backface-visibility: hidden;
+/* القيم العامة */
+backface-visibility: inherit;
+backface-visibility: initial;
+backface-visibility: unset;
+</syntaxhighlight>هنالك حالات لا نريد فيها إظهار الوجه الأمامي للعنصر معكوسًا على الوجه الخلفي، كما في تأثير قلب البطاقات. لاحظ أنَّ هذه الخاصية لن يكون لها أكثر على العناصر ثنائية البعد التي ليس لها منظور <code>[[CSS/perspective|perspective]]</code>.
 == أمثلة ==
@@ سطر 180: / سطر 182: @@
 تقبل الخاصية <code>backface-visibility</code> كلمةً محجوزةً من الكلمتين التاليتين.
-=== القيمة <code>visible</code> ===
+===  <code>visible</code> ===
 هذه الكلمة المحجوزة تعني أنَّ الوجه الخلفي للعنصر ظاهر، وسيعرض الوجه الأمامي مقلوبًا (mirrored).
-=== القيمة <code>hidden</code> ===
+===  <code>hidden</code> ===
 هذه الكلمة المحجوزة تعني أنَّ الوجه الخلفي للعنصر ليس ظاهرًا.