عرض مصدر CSS/perspective

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

== بطاقة الخاصية ==
{| class="wikitable" style="width: 100%;"
|-
! scope="row" style="width: 20%;" |[[CSS/initial value|القيمة الابتدائية]]
|<code>none</code>
|-
! scope="row" |تُطبَّق على
|جميع العناصر.
|-
! scope="row" |قابلة للوراثة
|لا
|-
!قابلة للتحريك
|نعم
|-
! scope="row" |القيمة المحسوبة
|كما حُدِّدَت.
|}<syntaxhighlight lang="css">
/* كلمة محجوزة */
perspective: none;

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

/* القيم العامة */
perspective: inherit;
perspective: initial;
perspective: unset;
</syntaxhighlight>العناصر ثلاثية الأبعاد التي تكون خلف المستخدم (أي التي تكون إحداثياتها على المحور z أكبر من قيمة الخاصية <code>perspective</code>) لن تُعرضَ.

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

== أمثلة ==
مثال يوضح تأثير قيمة الخاصية <code>perspective</code> على شكل العنصر في الفضاء ثلاثي الأبعاد:<syntaxhighlight lang="html">
<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>
</syntaxhighlight>شيفرة CSS:<syntaxhighlight lang="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;
}
</syntaxhighlight>
==دعم المتصفحات==
{| class="wikitable"
!الميزة
!|Chrome
!Firefox
!Internet Explorer
!Opera
!Safari
|-
! الدعم الأساسي
|12.0 (مع السابقة <code>-webkit-</code>)
45.0
|10.0 (مع السابقة <code>-moz-</code>)
16.0
|10
|15 (مع السابقة <code>-webkit-</code>)
23
|3.1 (مع السابقة <code>-webkit-</code>)
9.0
|}
== البنية العامة ==
تقبل الخاصية <code>perspective</code> قيمةً واحدةً من القيمتين التاليتين.

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

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

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

=== البنية الرسمية ===
<syntaxhighlight lang="css">
perspective: none | <length>;

</syntaxhighlight>

== انظر أيضًا ==
* صفحة الخاصية <code>[[CSS/transform|transform]]</code> التي تسمح لنا بتحويل شكل العناصر في الفضاء ثنائي أو ثلاثي الأبعاد، وبالتالي يمكن نقل العنصر أو تدويره أو إعادة تحجيمه أو جعله منحرفًا.
* صفحة الخاصية <code>[[CSS/length|length]]</code> التي تستعمل لتمثيل القيم الطولية.

== مصادر ومواصفات ==
* مسودة [https://drafts.csswg.org/css-transforms-2/#propdef-perspective CSS Transforms Level 2]. 
[[تصنيف:CSS|{{SUBPAGENAME}}]]
[[تصنيف:CSS Property|{{SUBPAGENAME}}]]
[[تصنيف:CSS Transforms|{{SUBPAGENAME}}]]