CSS/perspective-origin

الخاصية perspective-origin في CSS تُحدِّد الموضع الذي ينظر منه المستخدم إلى العنصر، وتُستخَدم قيمة هذه الخاصية كنقطة التلاشي (vanishing point) من الخاصية perspective.

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

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

/* قيمة واحدة */
perspective-origin: x-position;

/* قيمتان */
perspective-origin: x-position y-position;

/* يمكن قلب القيم إذا استعملنا كلمات محجوزة */
perspective-origin: y-position x-position;

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

أمثلة

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

<table>
  <tbody>
    <tr>
      <th>
        <code>perspective-origin: top left;</code>
      </th>
      <th>
        <code>perspective-origin: top;</code>
      </th>
      <th>
        <code>perspective-origin: top right;</code>
      </th>
    </tr>
    <tr>
      <td>
        <div class="container">
          <div class="cube potl">
            <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 potm">
            <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 potr">
            <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>
    <tr>
      <th>
        <code>perspective-origin: left;</code>
      </th>
      <th>
        <code>perspective-origin: 50% 50%;</code>
      </th>
      <th>
        <code>perspective-origin: right;</code>
      </th>
    </tr>
    <tr>
      <td>
        <div class="container">
          <div class="cube poml">
            <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 pomm">
            <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 pomr">
            <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>
    <tr>
      <th>
        <code>perspective-origin: bottom left;</code>
      </th>
      <th>
        <code>perspective-origin: bottom;</code>
      </th>
      <th>
        <code>perspective-origin: bottom right;</code>
      </th>
    </tr>
    <tr>
      <td>
        <div class="container">
          <div class="cube pobl">
            <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 pobm">
            <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 pobr">
            <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:

.potl {
  perspective-origin: top left;
  -webkit-perspective-origin: top left;
}

.potm {
  perspective-origin: top;
  -webkit-perspective-origin: top;
}

.potr {
  perspective-origin: top right;
  -webkit-perspective-origin: top right;
}

.poml {
  perspective-origin: left;
  -webkit-perspective-origin: left;
}

.pomm {
  perspective-origin: 50% 50%;
  -webkit-perspective-origin: 50% 50%;
}

.pomr {
  perspective-origin: right;
  -webkit-perspective-origin: right;
}

.pobl {
  perspective-origin: bottom left;
  -webkit-perspective-origin: bottom left;
}

.pobm {
  perspective-origin: bottom;
  -webkit-perspective-origin: bottom;
}

.pobr {
  perspective-origin: bottom right;
  -webkit-perspective-origin: bottom right;
}

.container {
  width: 100px;
  height: 100px;
  margin: 24px;
  border: none;
}

.cube {
  width: 100%;
  height: 100%;
  backface-visibility: visible;
  perspective: 300px;
  transform-style: preserve-3d;
  -webkit-backface-visibility: visible;
  -webkit-perspective: 300px;
  -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;
  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-origin قيمةً واحدةً أو قيمتين.

أوّل قيمة تُمثِّل الإزاحة على المحور x، والقيمة الثانية تُمثِّل الإزاحة على المحور y، وإذا لم تُحدَّد القيمة الثانية فستُعدّ center.

يمكن أن تكون الإزاحة على المحور x من بين القيم الآتية:

• طول مطلق <length> أو نسبة مئوية <percentage> نسبةً إلى عرض العنصر، ويمكن أن تكون هذه القيمة سالبةً.
• الكلمة المحجوزة left التي تكافئ القيمة الطولية 0.
• الكلمة المحجوزة center التي تكافئ النسبة المئوية 50%.
• الكلمة المحجوزة right التي تكافئ النسبة المئوية 100%.

يمكن أن تكون الإزاحة على المحور y من بين القيم الآتية:

• طول مطلق <length> أو نسبة مئوية <percentage> نسبةً إلى طول العنصر، ويمكن أن تكون هذه القيمة سالبةً.
• الكلمة المحجوزة top التي تكافئ القيمة الطولية 0.
• الكلمة المحجوزة center التي تكافئ النسبة المئوية 50%.
• الكلمة المحجوزة bottom التي تكافئ النسبة المئوية 100%.

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

perspective: <position>;

حيث:

<position> = [[ left | center | right | top | bottom | <length-percentage> ] | [ left | center | right | <length-percentage> ] [ top | center | bottom | <length-percentage> ] | [ center | [ left | right ] <length-percentage>? ] && [ center | [ top | bottom ] <length-percentage>? ]]

حيث:

<length-percentage> = <length> | <percentage>

انظر أيضًا

• صفحة الخاصية perspective التي تُستخدَم لتفعيل الفضاء ثلاثي الأبعاد في العنصر.
• صفحة الخاصية transform التي تسمح لنا بتحويل شكل العناصر في الفضاء ثنائي أو ثلاثي الأبعاد، وبالتالي يمكن نقل العنصر أو تدويره أو إعادة تحجيمه أو جعله منحرفًا.
• صفحة الخاصية length التي تستعمل لتمثيل القيم الطولية.

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

• مسودة CSS Transforms Level 2.