چشم انداز CSS

در این مقاله با ویژگی چشم انداز CSS آشنا می شویم.

توضیحات چشم انداز CSS

با استفاده از ویژگی perspectiv ، می توانید فاصله یک عنصر سه بعدی را به پیکسل مشخص کنید:

div {
    -webkit-perspective: 60px; /* Opera, Safari, Chrome */
    perspective: 6000px;
}

توجه: چشم انداز رندر عنصر را تغییر نمی دهد. برای آن ، از transform: perspektiv () استفاده کنید.

بررسی چشم انداز CSS

تنها مقداری که باید تعریف کنید فاصله است:

چشم انداز: فاصله؛

مقدار پیش فرض هیچ است ، که به معنای عدم تغییر چشم انداز است. با استفاده از واحدهای طول (به عنوان مثال پیکسل یا EM) می توانید مقدار سفارشی تنظیم کنید.

تعریف مبدأ چشم انداز

هنگامی که ازاین ویژگی دیدگاه استفاده می کنید ، مرکز عنصر به طور پیش فرض به نقطه ناپدید شدن آن تبدیل می شود. برای تعریف یک نقطه سفارشی ، می توانید از مبدا پرسپکتیو نیز استفاده کنید:

div {
    -webkit-perspective: 250px; /* Opera, Chrome, Safari */
    -webkit-perspective-origin: 25% 25%; /* Opera, Chrome, Safari */
    perspective: 250px;
    perspective-origin: 25% 25%;  	
}

بررسی این ویژگی نسبتاً ساده است – باید موقعیت مربوط به هر دو محور افقی و عمودی را مشخص کنید:

چشم انداز-مبدا: محور y-محور؛

می توانید از درصد یا کلمات کلیدی استفاده کنید – چپ ، مرکز یا راست برای افقی و بالا ، مرکز یا پایین برای مقدار عمودی.

توجه: منشأ چشم انداز بدون چشم انداز کار نمی کند.

پشتیبانی از مرورگر

این تگ در مرورگرهای IE ، safari ، firefox، cherom، opera وEdge پشتیبانی می شود.

در دوره آموزش CSS بین المللی آکادمی دویکس به صورت رایگان ثبت نام کنید.