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 پشتیبانی می کنند.