حمیدرضا سلیمیان

بلاگ شخصی حمیدرضا سلیمیان

دسته بندی مقالات
باهم در شبکه های اجتماعی !

معرفی CSS 3D : perspective perspective-origin

معرفی CSS 3D : perspective perspective-origin

مقدمه

تا قبل از css3 نمایش المنت ها در صفحه محدود به دو محور x , y بودند که اولویت نمایش اونها هم از از دو مفهوم دید طبقه ای و دیدترتیبی پیروی میکرد . اما با اومدن css3 قابلیت های سه بعدی هم به صورت استاندارد تعریف شد به طوری که الان تمام نسخه های جدید مرورگر ها از قابلیت سه بعدی استفاده پشتیبانی می کنن
فرایند سه بعدی در css همزمان شد با ظهور قالب ها و طرح های تخت (flat) که یکی از ویژگی های اون سادگی و دید دو بعدی اون بود که در ظاهر با روند قابلیت های سه بعدی در وب تضاد داره . اما باید این نکته رو اشاره کنم که
استفاده از قابلیت های سه بعدی در وب به معنی طراحی سایت سه بعدی نیست .، بلکه استفاده از اونها برای ساخت رابط کاربری بهتر و زیباتر هست و در واقه به کمک ساختار flat اومده نه بر ضدش
برخی از طراحان علاقه ای به استفاده از قابلیت های 3 بعدی در طرح های flat ندارن حتی پارو فراتر گذاشتن و معتقدن که طرح های flat طرح های دوبعدی است در حالی که با دیدن چند طرح خوب و معروف flat میبینیم که نه تنها این عقیده اشتباهه بلکه کامپوننت هایی زیادی میبینیم که از مفاهیم و قابلیت های سه بعدی استفاده کردند .
css 3D salimian.me

توی این مقاله سعی کردم توی قسمت اول ، محیا کردن فضای سه بعدی رو با ارائه چند تا مثال توضیح بدم و در قسمت دوم قابلیت های سه بعدی برای المت رو توضیح بدم و در قسمت اخر یک ابزار برای تست تمام این ویژگی ها درست کنم که بتونه کمکتون کنه و براتون مفید باشه
المنت های زیر رو در نظر بگیرید
در اینجا ما می خواهیم المنت box رو به صورت 3d در بیاریم
قبلش ما باید برای این المنت یک فضای سه بعدی درست کنیم و این کار با دادن ویزگی perspective و perspective-origin به المنت پدر یا نگهدارنده که در اینجا holder هست انجام میدیم . خوب حالا این دو ویژگی چی هستن ؟!

perspective

فاصله تا محور z رو تعیین میکنه.
perspective : 0
1
2
3
4
5
6
perspective : 350px
1
2
3
4
5
6
perspective : 500px
1
2
3
4
5
6
perspective : 900px
1
2
3
4
5
6

همونطور که توی باکس های بالا میبینید برای مقادیر کم دوربین یا همون دید در المنت نگهدارنده (Holder) نزدیک محور z هست به خاطر همین مکعب کشیده تر هست (نه بزرگتر) و همینطور برای مقادیر بالا از محور z دورمیشیم و مکعب کشیدگی کمتری داره
توجه داشته باشید که محل قرار گیری دوربین یا دید ما در حالت های بالا تغییری نکردی و محل قرار گیری توی هر 4 باکس سمت راست پایین هست r
مقادیری که میتونه بگیره : 0 ، عدد به px و عدد به em
نکته ای که هست اینکه برای مرورگر کروم و سافاری ( و به طور کلی موتور WebKit)از پیشوند -webkit- استفاده کنید . فایرفاکس ،اینترنت اکسپلورر 10 و بعد از اون و اپرا 15 به بعد این قابلیت رو پشتیبانی می کنن

perspective-origin

محل قرارگیری دوربین یا موقعیت دید در المت نگهدارنده رو مشخص میکنه
perspective-origin:top left
1
2
3
4
5
6
perspective-origin:top
1
2
3
4
5
6
perspective-origin:top right
1
2
3
4
5
6
perspective-origin: left
1
2
3
4
5
6
perspective-origin:50% 50%
1
2
3
4
5
6
perspective-origin: right
1
2
3
4
5
6
perspective-origin:bottom left
1
2
3
4
5
6
perspective-origin:bottom
1
2
3
4
5
6
perspective-origin:bottom right
1
2
3
4
5
6
مقدار پیش فرض 50% 50% یاهمون مرکز هست . علاوه بر کلمات کلیدی میتونه مقدار عددی px یا درصد و حتی منفی هم باشه
در perspective-origin هم برای مرورگر کروم و سافاری از پیشوند -webkit- استفاده کنید . فایرفاکس ،سافاری ،اینترنت اکسپلورر 10 و بعد از اون به بعد این قابلیت رو پشتیبانی می کنن ولی اپرا هنوز از این قابلیت پشتیبانی نمی کنه
نام
ایمیل
متن نظر
عبارت داخل تصویر