ویژگی transform در CSS3 امکان تغییر شکل, مکان و یا وضعیت یک عنصر را می دهد.
در جلسه قبل در مورد transform دو بعدی مطالبی را یاد گرفتیم. در اینجا ما در مورد transform سه بعدی صحبت خواهیم کرد.
تغییر شکل سه بعدی
یک المان تغییر شکل یافته بر روی المان فرزند تاثیر گذار نیست ولی می تواند آن باعث روی هم افتادن آن شود, مثل آنکه المان ها موقعیت دهی absolute را گرفتند.
به هر حال, المان تغییر شکل داده شده هنوز هم می تواند فضای فعلی را در مکان پیش فرض خود در صفحه بگیرد.
توابع transform در CSS3
ویژگی transform در CSS3 از توابعی برای دستکاری سیستم مختصات استفاده شده توسط یک المان به منظور ایجاد افکت transformation بهره می برد.
تابع translate3d()
المان را از موقعیت فعلی به موقعیت جدید در جهت محورهای x,y,z حرکت می دهد.
که بصورت translate(tx, ty, tz)
نوشته می شود. مقدار درصد برای سومین پارامتر (tz
) مورد قبول نیست.
1 2 3 4 5 6 7 8 9 10 11 |
.container { width: 125px; height: 125px; perspective: 500px; border: 4px solid #e5a043; background: #fff2dd; } .transformed { -webkit-transform: translate3d(25px, 25px, 50px); /* Chrome, Safari, Opera */ transform: translate3d(25px, 25px, 50px); /* Standard syntax */ } |
تابع translate3d(25px, 25px, 50px)
تصویر را ۲۵ پیکسل در محور x,y مثبت و ۵۰ پیکسل نیز در جهت عمود در محور y مثبت حرکت می دهد.
Transform سه بعدی از سیستم مختصات ۳بعدی استفاده می کند اما تغییر حرکت در جهت z همیشه قابل مشاهده نیست زیرا المان روی یک صفحه دوبعدی است و هیچ عمقی ندارد.
خاصیت perspective
و perspective-origin
می تواند برای افزودن یک حس عمقی به صحنه بدهد. مثلا باعث بزرگ یا کوچک نمایش دادن آن شود.
نکته: اگر از تغییر شکل سه بعدی را بدون ست کردن prespective
به المان لحاظ کنید, افکت بصورت ۳بعدی نمایان نخوهد شد.
تابع rotate3d()
تابع rotate3d المان را در فضای ۳بعدی با مشخص کردن جهت x,y,z چرخش می دهد و بصورت rotate(vx, vy, vz, angle)
نوشته می شود.
1 2 3 4 5 6 7 8 9 10 11 |
.container{ width: 125px; height: 125px; perspective: 300px; border: 4px solid #a2b058; background: #f0f5d8; } .transformed { -webkit-transform: rotate3d(0, 1, 0, 60deg); /* Chrome, Safari, Opera */ transform: rotate3d(0, 1, 0, 60deg); /* Standard syntax */ } |
تابع rotate3d(0, 1, 0, 60deg)
تصویر را در جهت محور z به اندازه ۶۰ درجه می چرخاند. شما می توانید از مقادیر منفی برای چرخش عکس در جهت مخالف استفاده کنید.
تابع scale3d()
تابع scale3d()
اندازه المان را تغییر می دهد و بصورت scale(sx, sy, sz)
نوشته می شود.
نتایج این تابع تا زمانی که با دیگر توابعی مثل rotate
و prespective
ترکیب نکنیم, نمایان نمی شود.
1 2 3 4 5 6 7 8 9 10 11 |
.container{ width: 125px; height: 125px; perspective: 300px; border: 4px solid #6486ab; background: #e9eef3; } .transformed { -webkit-transform: scale3d(1, 1, 2) rotate3d(1, 0, 0, 60deg); /* Chrome, Safari, Opera */ transform: scale3d(1, 1, 2) rotate3d(1, 0, 0, 60deg); /* Standard syntax */ } |
تابع matrix3d()
تابع matrix3d
می تواند تمام transform های سه بعدی مثل تغییر موقعیت, چرخش و موقعیت را یکجا انجام دهد.
این تابع ۱۶ پارامتر را بصورت ۴×۴ دریافت می کند.
یک مثال از نحوه انجام تغییر شکل ۳بعدی را با تابع matrix3d()
می بینید.
1 2 3 4 5 6 7 8 9 10 11 |
.container{ width: 125px; height: 125px; perspective: 300px; border: 4px solid #d14e46; background: #fddddb; } .transformed { -webkit-transform: matrix3d(0.359127, -0.469472, 0.806613, 0, 0.190951, 0.882948, 0.428884, 0, -0.913545, 0, 0.406737, 0, 0, 0, 0, 1); /* Chrome, Safari, Opera */ transform: matrix3d(0.359127, -0.469472, 0.806613, 0, 0.190951, 0.882948, 0.428884, 0, -0.913545, 0, 0.406737, 0, 0, 0, 0, 1); /* Standard syntax */ } |
به هر حال, زمانی که تغییرشکل را بایک دستور انجام می دهید, بسیار ساده تر از آن خواهد بود که همه را جداگانه و به ترتیب لحاظ کنید. مثل این :
1 2 3 4 5 6 7 8 9 10 11 |
.container{ width: 125px; height: 125px; perspective: 300px; border: 4px solid #a2b058; background: #f0f5d8; } .transformed { -webkit-transform: translate3d(0, 0, 60px) rotate3d(0, 1, 0, -60deg) scale3d(1, 1, 2); /* Chrome, Safari, Opera */ transform: translate3d(0, 0, 60px) rotate3d(0, 1, 0, -60deg) scale3d(1, 1, 2); /* Standard syntax */ } |
توابع transform سه بعدی
جدول زیر یک خلاصه کوتاه از تمام توابع سه بعدی transform را می دهد.
Function | Description |
---|---|
translate3d(tx,ty,tz) |
المان را در جهت محورهای x,y,z حرکت می دهد |
translateX(tx) |
المان را در جهت محور x حرکت می دهد |
translateY(ty) |
المان را در جهت محور y حرکت می دهد |
translateZ(tz) |
المان را در جهت محور z حرکت می دهد |
rotate3d(x,y,z, a) |
المان را در فضای ۳بعدی با مشخص کردن جهت x,y,z چرخش می دهد |
rotateX(a) |
المان را در جهت محور x چرخش می دهد |
rotateY(a) |
المان را در جهت محور y چرخش می دهد |
rotateZ(a) |
المان را در جهت محور z چرخش می دهد |
scale3d(sx,sy,sz) |
اندازه المان در چهت مجور x,y,z افزایش یا کاهش می دهد. تابع scale(1,1,1) هیچ تاثیری روی المان ندارد |
scaleX(sx) |
اندازه المان در چهت مجور x افزایش یا کاهش می دهد. |
scaleY(sy) |
اندازه المان در چهت مجور y افزایش یا کاهش می دهد. |
scaleZ(sz) |
اندازه المان در چهت مجور z افزایش یا کاهش می دهد. |
matrix(n,n,n,n,n,n, n,n,n,n,n,n,n,n,n,n) |
یک تغییرشکل سه بعدی در فرم ۴در۴ ماتریکس ۱۶ مقداری را انجام می دهد |
perspective(length) |
به طور عمومی هرچه قدر مقدار این تابع بیشتر شود انگار المان دورتر از تماشا کننده به نظر می رسد. |
امیدوارم در این بخش آموزش CSS, از ویژگی transform در CSS3 (سه بعدی) نهایت استفاده را برده باشید.
هر سوالی داشتید ، از قسمت نظرات ارسال کنید . سریعا ، پاسخگوی سوالات شما هستیم .
موفق باشید.