تغییر شکل‌های سه بعدی CSS3

تغییر شکل‌های سه بعدی CSS3 – آموزش CSS مقدماتی درس 42

ساختار تغییر شکل‌های سه بعدی در CSS3 به ما این امکان را می‌دهد که بتوانید عناصر را در یک فضای سه بعدی تغییر حالت دهیم.

تغییرات سه بعدی عناصر

با استفاده از ساختار تغییر شکل سه بعدی در CSS3 شما این امکان را دارید که بتوانید از دستورات پایه ای تغییر شکل مانند move (برای حرکت)، scale (برای مقیاس دادن)و skew (برای خم کردن) اشیا در یک فضای سه بعدی استفاده کنید.

تغییر دو بعدی اشیا به صورت دوبعدی تاثیری را بروی عناصر کناری ندارد، اما عنصر متحرک می‌تواند بر روی آن‌ها حالت همپوشانی داشته باشد، این دقیقا مانند زمانی است که عنصرها به صورت absolute  (یا مطلق) موقعیت دهی شده باشند. با این که عنصر در فضا تغییر می‌کنند، اما مکان پیش فرض و اولیه آن بدون تغییر می‌ماند و توسط اشیاء دیگر اشغال نمی شود.

استفاده از Transform  و تابع‌های وابسته آن در CSS

ویژگی Transform در CSS3 این امکان را به شما می‌دهد که بتوانید از تابع‌های مختلفی که در آن وجود دارد استفاده کنید تا بر حسب سیستم مختصاتی یک عنصر را تغییر دهدید و یا آنکه اثر جابجائی و تغییر شکل را برای آن اجرا کنید.

در بخش‌های بعدی ما به توضیح تابع‌های تغییر شکل سه بعدی عناصر می‌پردازیم:

تابع translated3d

این تابع عناصر را بر اساس موقعیت محورهای مختصاتX، Y و Z در فضا جابجا می‌کند. این تابع می‌تواند به صورت translate(tx, ty,tz) نوشته شود. دقت کنید که وارد کردن مقدار درصدی برای پارامتر سوم (tz) مجاز نیست.

مثال

.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) سبب می‌شود که تصویر ما به صورت 25 پیکسل به صورت افقی و به صورت 25 پیکسل به صورت عمودی و 50 پیکسل در راستای عمود حرکت کند. در اینجا مقدارهای مثبت به معنای حرکت به سمت راست و بالا و در راستای محور عمود است. اگر مقدارها منفی باشند به ترتیب به معنای حرکت به سمت چپ و پائین و خلاف محور عمود خواهد بود.

تابع translated3d

هرچند در اینجا تغییرات سه بعدی از سیستم مختصاتی سه محوره استفاده می‌کند، اما حرکت در راستای محور Z همیشه مد نظر ما نیست، زیرا عناصری که در طراحی وب به کار گرفته می‌شوند، همیشه به صورت مسطح و دو بعدی هستند و اغلب عمقی ندارند.

برای آنکه بتوانیم یک تصویر پرسپکتیوی ایجاد کنیم، می‌توانید عناصر را در راستای محور Z حرکت دهیم. این کار سبب می‌شود که برخی از عناصر به دید ما نزدیک تر شوند و به نظر بزرگتر بیایند، و اشیائی که از دید ما دورتر می‌شوند کوچکتر به نظر بیایند.

نکته

اگر شما تغییر شکل‌های سه بعدی را به یک عنصر اعمال کنید، بدون آن که تنظیمات سه بعدی آن را آماده کرده باشید، تغییرات در بعد سوم (یعنی محور Z) بدون تاثیر خواهند بود.

تابع rotated3d

تابع rotated3d() سبب می‌شود که عناصر در فضای سه بعدی بر اساس یک محور مشخص شده و با توجه به زاویه داده شده گردش نمایند. این موضوع را می‌توانید به شکل تابع rotate(xv, vy, vz, angle) بنویسید.

مثال

.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) سبب می‌شود که یک تصویر  به اندازه شصت درجه در راستای محور y گردش کند. شما می‌توانید ازمقدارهای منفی نیز برای گردش در جهت‌های مختلف استفاده کنید.

تابع rotated3d

تابع scale3d

تابع scale3d()، سبب می‌شود که اندازه یک عنصر تغییر پیدا کند. این تابع می‌تواندبه صورت scale(sx, sy,sz) نوشته شود. این تابع تاثیر چشمگیری ندارد، مگر آن که شما از آن با تابع‌های دیگری مانند rotate یا perspective استفاده کنید، نمونه ای از به کار بردن این تابع در مثال زیر نمایش داده شده است.

مثال

.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(0, 1, 0, 60deg); /* Standard syntax */

}

تابع scale3d(1,1,2) سبب می‌شود که مقیاس یک عنصر در برابر محور Z انجام شود، این تابع در کنار تابع rotate3d(1,0,0,60deg) به کار برده می‌شود، که این تابع نیز سبب گردش عنصر در راستای محور x می‌گردد.

تابع scale3D

تابع matrix3d

تابع matrix3d() نیز می‌تواند سبب شود که تمامی تغییر شکل‌ها یعنی translate، rotate و scale در یک لحظه انجام شود. این تابع می‌تواند نزدیک به 16 پارامتر (چهار پارامتر، به ازای چهار تابع ذکر شده) را دریافت کند تا بتواند ماتریکس تغییر شکل خودش را ایجاد کند.

در مثال زیر ما یک تغییر شکل سه بعد را با استفاده از تابع matrix3d() انجام داده ایم.

مثال

.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 */

}

هرچند زمانی که بیشتر از یک تغییر در هر زمان انجام دهیم، مرسوم است که هر کدام از تغییر شکل‌ها را با استفاده از توابع مختص به خودشان و به صورت جداگانه انجام دهیم. در اینجا شکل درست تر این تابع به صورت زیر خواهد بود:

مثال

.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 */

}

تابع‌های تغییر شکل سه بعدی

در جدول زیر خلاصه ای از کل تابع‌های تغییر شکل سه بعد در زبان CSS آورده شده است.

تابع توضیحات
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 به اندازه زاویه a گردش می‌کند.
rotateY(a) با این تابع یک عنصر در دور محور Y به اندازه زاویه a گردش می‌کند.
rotateZ(a) با این تابع یک عنصر در دور محور Z به اندازه زاویه a گردش می‌کند.
scale3d(sx,sy,sz) این تابع سبب بزرگ شدن یک عنصر در راستای محور افقی (X) و محور ایستاده (Y)  و محور عمود به صفحه (Z) می‌شود. در صورتی که این تابع به شکل scale3d(1, 1,1) نوشته شود، آن هیچ اثری بر روی عنصر مورد نظر ما ندارد.
scaleX(sx) این تابع سبب می‌شود که عنصر مورد نظر در راستای محور X  با ضریب sx بزرگ یا کوچک شود.
scaleY(sy) این تابع سبب می‌شود که عنصر مورد نظر در راستای محور Y  با ضریب sy بزرگ یا کوچک شود.
scaleZ(sz) این تابع سبب می‌شود که عنصر مورد نظر در راستای محور Z  با ضریب sz بزرگ یا کوچک شود.
matrix3d(n,n,n,n,n,n, n,n,n,n,n,n,n,n,n,n) این تابع تمامی مقدارهای تابع‌های بالا را به صورت شانزده آروگومان دریافت می‌کند و به یکباره تغییرات را بر روی یک عنصر انجام می‌دهد.
perspective(length) این تابع سبب می‌شود که یک دید پرسکتیوی نسبت به یک عنصر ایجاد شود. به صورت کلی، هر چقدر مقدار آرگومان این تابع بیشتر باشد، عنصر به نظر دور تر می‌رسد، و هر چقد کمتر باشد، به بیننده نزدیک تر ست.

No votes yet.
Please wait...

دیدگاهتان را بنویسید

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

منو اصلی

question