اُپن تگ | منابع و محتوای آموزشی برای طراحان وب
بدون نتیجه
نمایش همه نتایج
  • ثبت نام / ورود
  • خانه
  • آموزش ها
  • مقالات
  • مرجع HTML
  • مرجع CSS
اپن تگ
  • خانه
  • آموزش ها
  • مقالات
  • مرجع HTML
  • مرجع CSS
بدون نتیجه
نمایش همه نتایج
بدون نتیجه
نمایش همه نتایج
اپن تگ

خانه › CSS3 › ویژگی › ویژگی perspective-origin در CSS

ویژگی perspective-origin در CSS

perspective-origin Property

عناصر مرتبط:
perspective

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

پست قبلی

ویژگی perspective در CSS

پست بعدی

ویژگی pointer-events در CSS

پست بعدی
css-pointer-events-property

ویژگی pointer-events در CSS

دیدگاهتان را بنویسید لغو پاسخ

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

بنر مرجع html
بنر مرجع css

اُپن تگ

اپن تگ در تلاش است با گردآوری منابع و ارائه محتوای آموزشی در حوزه طراحی وب، راه را برای دسترسی طراحان وب و علاقه‌مندان به آخرین روش‌ها و تکنولوژی‌های این بخش از صنعت توسعه وب هموارتر سازد.

با خبر باشید!

برای اطلاع از مطالب ويژه و دوره های آموزشی جدید در خبرنامه اُپن‌تگ عضو شوید.

  • درباره
  • ارتباط با ما

تمامی حقوق برای اپن تگ محفوظ است. استفاده از مطالب تنها با ذکر منبع مجاز است.

  • ورود
  • ثبت نام
  • سبد خرید
  • خانه
  • آموزش ها
  • مقالات
  • مرجع HTML
  • مرجع CSS

خوش آمدید!

به حساب خود وارد شوید

فراموشی رمز عبور ؟ ثبت نام

ساخت حساب کاربری!

فرم زیر را برای ثبت نام تکمیل نمایید

همه فیلد ها ضروری اند وارد شدن

رمز عبور خود را بازیابی کنید

لطفاً ایمیل یا نام کاربری خود را جهت بازیابی رمز عبور وارد نمایید

وارد شدن