CSS3 3D Transform – بخش اول
316 روز پیش
پويا صادقى , آموزش CSS
ایجاد جلوه های سهبعدی برای المنتهای وب با استفاده از CSS3
قبلا درمورد transform دوبعدی نوشته بودم ، transform دوبعدی در اکثر مرورگرهای مدرن (Firefox+3.5 / Chrome / Opera+10.6 / Safari+3 / IE+9) پشتیبانی میشه ولی توابع سهبعدی هنوز در فایرفاکس و اپرا پشتیبانی نمیشه و فقط در IE+10 و Chrome+12 و Safari+4 قابل اجرا هستن.مثل توابع دوبعدی ، این توابع هم با کد transform در CSS نوشته میشه:
-webkit-transform: -ms-transform:
استفاده از تابع پرسپکتیو
perspective یا ژرفانمایی یکی از مهمترین فاکتورهای کار با بعد سومه.
ژرفانمایی یا پرسپکتیو در زمینه دید و پندار دیداری، راهی است که در آن اشیا و چیزها بر پایهٔ دوریشان و یا ابعاد و یا جایگاهشان نسبت به چشم، برای چشم ما نمایان میشوند. (ویکیپدیا)
در تصویر زیر انتهای جاده مشخص نیست و ما فقط یه نقطه کور میبینیم. عمق این تصویر ، تا جایی که به نقطه کور میرسه است. در CSS هم ، برای استفاده از محور Z ها، باید ابتدا عمق رو مشخص کنیم، یعنی طول محور Z ها.(نمونه تغییر مقدار پرسپکتیو)
اول یه div ایجاد میکنیم با کلاس container و 4 تا div فرزند داخلش قرار میدیم:
<div class="container"> <div class="d1">D1</div> <div class="d2">D2</div> <div class="d3">D3</div> <div class="d4">D4</div> </div>
حالا در CSS ، از تابع پرسپکتیو در کلاس container استفاده میکنیم. (من 600 پیکسل درنظر میگیرم)
.container{perspective:600;-webkit-perspective:600;}
*دقت کنیدکه تابع پرسپکتیو باید برای عنصر والد تنظیم بشه ؛ همونطور که برای container که والد چهار تا div بود تنظیم شد.
اینم برای 4 تا div:
.d1,.d2,.d3,.d4{
background:#bbb; width:100px;height:100px;
margin:20px auto;font-size:85px;border-radius:5px;}
حالا میخوایم برای این 4 تا div ، از توابع transform استفاده کنیم:
تابع translate3d
همونطور که با استفاده از translate میتونیم اجزای وب رو در محورهای X و Y جابجا کنیم، با استفاده از translate3d و translateZ میتونیم عناصر وب رو در محور Z هم جابجا کنیم:
translate3d(x, y, z)
.d1{-webkit-transform:scale3d(3,1,1);-ms-transform:scale3d(3,1,1);}
کد بالا div اول ما رو به صورت زیر درمیاره،در محور X ها سایزش رو سه برابر میکنه:
میریم سراغ div دوم:
تابع translateZ
با استفاده از تابع translateZ ، باکس دوم رو، روی محور Zها، جابجا میکنیم:
.d4{-webkit-transform: translateZ(300px);-ms-transform: translateZ(300px);}
چیزی که دیده میشه، یه باکس بزرگتره، ولی درواقع D2 داره از نقطه کور فرضی، دور میشه و به چشم شما نزدیک میشه:
تابع transform-style
این تابع برای مشخص کردن نوع transform هست. 2 حالت داره:
حالت عادی: هیچ المنتی با جابجاشدن در محورهای x و y و z بر روی المنت های دیگه قرار نمیگیره:
transform-style: flat;
حالت سهبعدی:وقتی یک المنت در محورهای x و y و z جابجا بشه میتونه بر روی المنتهای دیگه قرار بگیره:
transform-style: preserve-3d;
برای درک بهتر، نمونه استفاده از تابع transform-style رو ببینید
*دقت کنید که transform-style هم مثل تابع perspective ، باید برای عنصر والد معرفی بشه:
.container{perspective:600;-webkit-perspective:600;
transform-style: preserve-3d;-webkit-transform-style: preserve-3d;}
تابع perspective-origin
این تابع برای جابجا کردن نقطه کوره: دو مقدار میگیره و مقادیر پیش فرضش هم 50% و 50% هست:
-webkit-perspective-origin:50% 50%;
میتونیم به جای % از پیکسل یا left ، right و center استفاده کنیم. (نمونه)
* تابع perspective-origin هم برای والد تعریف میشه:
.container{perspective:600;-webkit-perspective:600;
transform-style: preserve-3d;-webkit-transform-style: preserve-3d;
-webkit-perspective-origin:50px 20px;}
