الخاصية perspective-origin
< CSS
اذهب إلى التنقل
اذهب إلى البحث
The printable version is no longer supported and may have rendering errors. Please update your browser bookmarks and please use the default browser print function instead.
الخاصية 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.