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

من موسوعة حسوب
< CSS
اذهب إلى التنقل اذهب إلى البحث
 
 
(3 مراجعات متوسطة بواسطة مستخدمين اثنين آخرين غير معروضة)
سطر 1: سطر 1:
 
<noinclude>{{DISPLAYTITLE:الخاصية <code>backface-visibility</code>}}</noinclude>
 
<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%;"
 
{| class="wikitable" style="width: 100%;"
 
|-
 
|-
سطر 26: سطر 19:
 
! scope="row" |القيمة المحسوبة
 
! 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>.
  
 
== أمثلة ==
 
== أمثلة ==
−
مثال يوضح تأثير قيمة الخاصية <code>backface-visibility</code> على إظهار الوجه الخلفي للعناصر في الفضاء ثلاثي الأبعاد:<syntaxhighlight lang="css">
+
مثال يوضح تأثير قيمة الخاصية <code>backface-visibility</code> على إظهار الوجه الخلفي للعناصر في الفضاء ثلاثي الأبعاد:<syntaxhighlight lang="html">
 
<table>
 
<table>
 
   <tbody>
 
   <tbody>
سطر 157: سطر 159:
 
}
 
}
 
</syntaxhighlight>
 
</syntaxhighlight>
 +
 
==دعم المتصفحات==
 
==دعم المتصفحات==
 
{| class="wikitable"
 
{| class="wikitable"
سطر 180: سطر 183:
 
تقبل الخاصية <code>backface-visibility</code> كلمةً محجوزةً من الكلمتين التاليتين.
 
تقبل الخاصية <code>backface-visibility</code> كلمةً محجوزةً من الكلمتين التاليتين.
  
−
=== القيمة <code>visible</code> ===
+
=== <code>visible</code> ===
 
هذه الكلمة المحجوزة تعني أنَّ الوجه الخلفي للعنصر ظاهر، وسيعرض الوجه الأمامي مقلوبًا (mirrored).
 
هذه الكلمة المحجوزة تعني أنَّ الوجه الخلفي للعنصر ظاهر، وسيعرض الوجه الأمامي مقلوبًا (mirrored).
  
−
=== القيمة <code>hidden</code> ===
+
=== <code>hidden</code> ===
 
هذه الكلمة المحجوزة تعني أنَّ الوجه الخلفي للعنصر ليس ظاهرًا.
 
هذه الكلمة المحجوزة تعني أنَّ الوجه الخلفي للعنصر ليس ظاهرًا.
  
سطر 191: سطر 194:
  
 
</syntaxhighlight>
 
</syntaxhighlight>
 +
 +
== انظر أيضًا ==
 +
* صفحة الخاصية <code>[[CSS/visibility|visibility]]</code> التي تسمح بإظهار أو إخفاء عنصر دون التأثير بتخطيط المستند.
 +
* صفحة الخاصية <code>[[CSS/position|position]]</code> التي تصف كيفية تموضع العنصر في المستند.
 +
* صفحة الخاصية <code>[[CSS/float|float]]</code>  التي تُحدِّد أنَّ العنصر يجب أن يوضع على يسار أو يمين الحاوية التي ينتمي إليها.
 +
* صفحة الخاصية <code>[[CSS/display|display]]</code> التي  تُحدِّد ما هو نوع صندوق العرض الذي سيستخدم مع العنصر.
  
 
== مصادر ومواصفات ==
 
== مصادر ومواصفات ==
 
* مسودة [https://drafts.csswg.org/css-transforms-2/#propdef-backface-visibility CSS Transforms Level 2].  
 
* مسودة [https://drafts.csswg.org/css-transforms-2/#propdef-backface-visibility CSS Transforms Level 2].  
−
[[تصنيف:CSS]]
+
[[تصنيف:CSS|{{SUBPAGENAME}}]]
−
[[تصنيف:CSS Property]]
+
[[تصنيف:CSS Property|{{SUBPAGENAME}}]]
−
[[تصنيف:CSS Transforms]]
+
[[تصنيف:CSS Transforms|{{SUBPAGENAME}}]]

المراجعة الحالية بتاريخ 08:31، 3 يناير 2023

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

انظر أيضًا

  • صفحة الخاصية visibility التي تسمح بإظهار أو إخفاء عنصر دون التأثير بتخطيط المستند.
  • صفحة الخاصية position التي تصف كيفية تموضع العنصر في المستند.
  • صفحة الخاصية float  التي تُحدِّد أنَّ العنصر يجب أن يوضع على يسار أو يمين الحاوية التي ينتمي إليها.
  • صفحة الخاصية display التي  تُحدِّد ما هو نوع صندوق العرض الذي سيستخدم مع العنصر.

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

مجلوبة من "https://wiki.hsoub.com/index.php?title=CSS/backface-visibility&oldid=32530"