CSS/perspective

الخاصية perspective في CSS تُستخدَم لتفعيل الفضاء ثلاثي الأبعاد في العنصر، لكي نتمكن من وضع العناصر الأبناء في ذاك الفضاء، وتسمح هذه الخاصية لنا بإضفاء شعور بالعمق إلى العنصر، بجعل العناصر الأقرب إلى المستخدم تبدو وأكبر، والعناصر الأبعد تبدو أصغر.

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

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

/* كلمة محجوزة */
perspective: none;

/* <length> قيم طولية */
perspective: 20px;  
perspective: 3.5em;

/* القيم العامة */
perspective: inherit;
perspective: initial;
perspective: unset;

العناصر ثلاثية الأبعاد التي تكون خلف المستخدم (أي التي تكون إحداثياتها على المحور z أكبر من قيمة الخاصية perspective) لن تُعرضَ.

ستوضع نقطة التلاشي (vanishing point) افتراضيًا في منتصف العنصر، لكن يمكن تغيير موضعها باستخدام الخاصية perspective-origin.

أمثلة

مثال يوضح تأثير قيمة الخاصية perspective على شكل العنصر في الفضاء ثلاثي الأبعاد:

<table>
  <tbody>
    <tr>
      <th><code>perspective: 250px;</code>
      </th>
      <th><code>perspective: 350px;</code>
      </th>
      <th><code>perspective: 500px;</code>
      </th>
    </tr>
    <tr>
      <td>
        <div class="container">
          <div class="cube pers250">
            <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>
      </td>
      <td>
        <div class="container">
          <div class="cube pers350">
            <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>
      </td>
      <td>
        <div class="container">
          <div class="cube pers500">
            <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>
      </td>
    </tr>
  </tbody>
</table>

شيفرة CSS:

.pers250 {
  perspective: 250px;
}

.pers350 {
  perspective: 350px;
}

.pers500 {
  perspective: 500px;
}

 .container {
  width: 200px;
  height: 200px;
  margin: 75px 0 0 75px;
  border: none;
}

.cube {
  width: 100%;
  height: 100%;
  backface-visibility: visible;
  perspective-origin: 150% 150%;
  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);
}

.back {
  background: rgba(0, 255, 0, 1);
  color: black;
  transform: rotateY(180deg) translateZ(50px);
}

.right {
  background: rgba(196, 0, 0, 0.7);
  transform: rotateY(90deg) translateZ(50px);
}

.left {
  background: rgba(0, 0, 196, 0.7);
  transform: rotateY(-90deg) translateZ(50px);
}

.top {
  background: rgba(196, 196, 0, 0.7);
  transform: rotateX(90deg) translateZ(50px);
}

.bottom {
  background: rgba(196, 0, 196, 0.7);
  transform: rotateX(-90deg) translateZ(50px);
}

th, p, td {
  background-color: #EEEEEE;
  padding: 10px;
  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

البنية العامة

تقبل الخاصية perspective قيمةً واحدةً من القيمتين التاليتين.

none

كلمة محجوزة تُشير إلى عدم تطبيق تأثير المنظور على العنصر.

<length>

قيمة مطلقة تُحدِّد المسافة بين العنصر والمستوي z=0، وتُستخدَم هذه القيمة لتطبيق تأثير المنظور على العنصر ومحتواه (وهذا هو الفرق بين هذه الخاصية والدالة perspective()‎ التي يمكن تطبيقها على الخاصية transform).

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

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

perspective: none | <length>;

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

• مسودة CSS Transforms Level 2.