ویژگی perspective-origin در CSS

perspective-origin Property

ویژگی perspective-origin در CSS موقعیت ناظر یا بیینده را نسبت به عنصری که دارای ویژگی perspective است را مشخص می کند.

نحوه نوشتار

perspective-origin: x-position;

perspective-origin: x-position y-position;

perspective-origin: y-position x-position;

نکته: ویژگی perspective-origin به فرزندِ عنصری که این ویژگی به آن داده شده اعمال می شود و نه به خود آن.

مقادیر

محور افقی (x-position)​

موقعیت ناظر را در محور افقی مشخص می کند که می تواند یکی از مقادیر زیر باشد:

• درصد (٪): موقیت را در محور افقی بر حسب درصدی از عرض عنصر محاسبه و در نظر می گیرد. این مقدار می تواند که منفی نیز باشد.
• left – ‌این کلید واژه برابر با مقدار 0 است.
• center – این کلید واژه برابر با مقدار %50 است.
• right – این کلید واژه برابر با مقدار %100 است.

محور عمودی (y-position)​

موقعیت ناظر را در محور عمودی مشخص می کند که می تواند یکی از مقادیر زیر باشد:

• درصد (٪): موقیت را در محور عمودی بر حسب درصدی از طول عنصر محاسبه و در نظر می گیرد. این مقدار می تواند که منفی نیز باشد.
• top – ‌این کلید واژه برابر با مقدار 0 است.
• center – این کلید واژه برابر با مقدار %50 است.
• bottom – این کلید واژه برابر با مقدار %100 است.

در مثال زیر نحوه عملکرد این ویژگی را میبینیم:

مشاهده و ویرایش کد در حالت تمام صفحه

html

<section>
      <figure>
        <caption><code>perspective-origin: top left;</code></caption>
          <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>
      </figure>
      
      <figure>
        <caption><code>perspective-origin: top;</code></caption>
         <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>
      </figure>
      
      <figure>
        <caption><code>perspective-origin: top right;</code></caption>
        <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>
      </figure>
</section>

css

figure {
    float: left;
    margin: 20px 20px 0 20px;
}
.potl {
    perspective-origin: top left; }
.potm {
    perspective-origin: top; 
}
.potr {
    perspective-origin: top right; 
}
.container {
    width: 100px;
    height: 100px;
    margin: 24px;
    border: none;
}
.cube {
    width: 100%;
    height: 100%;
    backface-visibility: visible;
    perspective: 300px;
    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);
}

پشتیبانی از مرورگرها
تمام مرورگرها از این ویژگی در CSS پشتیبانی می کنند.