این وب سایت با تمامی محتویات و دامین به فروش می رسد. لطفا جهت خریداری از طریق بخش ارتباط با ما در تماس باشید

جستجو ...


هدف ما این است که شما را در بالاترین سطح برنامه نویسی و توسعه وب سایت باشید.

ثبت نام کنید

در css، می‌توانیم با دور یا نزدیک کردن صفحه z=0 به مخاطب، عنصر را به یک فضای سه بعدی ببریم و برای آن یک چشم انداز تعریف کنیم و سپس تبدیل‌های سه بعدی مختلف را بر روی آن اجرا کنیم. با لیداوب همراه باشید.


پیش نیاز این دوره آموزشی:

علاوه بر توابع تبدیل دو بعدی، در css می‌توانید نسخه سه بعدی این توابع تبدیل را هم بر عناصر HTML اعمال کنید. همچنین این امکان وجود دارد که برای عناصر، چشم انداز تعریف کنیم و بدین ترتیب به عنصر یک عمق اضافه کنیم. برای آشنایی بیشتر با این امکانات css، در این درس با ما همراه باشید.  

توابع تبدیل سه بعدی

توابع تبدیل سه بعدی، تبدیل‌هایی در فضای سه بعدی هستند که نسبت به محورهای x ،y و z انجام می‌شوند. این تبدیل‌ها شامل انتقال، چرخش و تغییر مقیاس است که در ادامه آنها را معرفی می‌کنیم.

تابع تبدیل translate

تابع تبدیل translate(tz) ، برای انتقال عنصر در راستای محور z استفاده می‌شود. tz، یک عدد صحیح است که طول انتقال را مشخص می‌کند. مقادیر مثبت باعث انتقال در جهت مثبت محور z می‌شود و مقادیر منفی، انتقال را در جهت منفی محور z انجام می‌دهد.

transform: translateX(300px);
transform: translateX(-50%);
transform: translateX(150%);

تابع تبدیل translate3d

تابع تبدیل ()translate3d، معادل سه بعدی تابع ()translate است. این تابع، یک بردار سه تایی (tx, ty, tz) دریافت می‌کند که tx، مقدار انتقال روی محور x نشان می‌دهد و مقادیر ty و tz، به ترتیب طول انتقال روی محور y و z  را تعیین می‌کنند. مقادیر مشخص شده باید اعداد صحیح باشند و نمی‌توان آنها را برحسب درصد بیان کرد.

transform: translateY(300px);
transform: translateY(-50%);
transform: translateY(150%);

تابع تبدیل scaleZ

تابع تبدیل ()scaleZ، اندازه عنصر را در بعد سوم و در راستای محور z تغییر می‌دهد. این تابع به عنوان پارامتر ورودی مقدار عددی sz را دریافت می‌کند که میزان بزرگ یا کوچک شدن اندازه عنصر را مشخص می‌کند. 

transform: scaleZ(2); 
transform: scaleZ(1); /* element is unchanged */
transform: scaleZ(0.25); 
transform: scaleZ(-1);

تابع تبدیل scale3d

تابع تبدیل ()scale3d معادل سه بعدی تابع ()scale است. این تابع یک بردار سه تایی (sx, sy, sz) دریافت می‌کند. مقادیر sx ،sy و sz  به ترتیب مقدار تغییر اندازه عنصر در راستای محورهای x ،y و z را مشخص می‌کنند.

اگر مقدار تعیین شده بزرگتر از یک باشد، عنصر در راستای محور موردنظر بزرگتر می‌شود. اگر مقدار برابر با یک باشد، اندازه عنصر تغییر نمی‌کند و اگر عنصر در بازه (۰,۱) باشد، عنصر کوچکتر می‌شود. مقادیر منفی هم مجاز است اما این مقادیر اندازه عنصر را تغییر نمی‌دهد بلکه مقادیر منفی باعث معکوس شدن عنصر می‌شود.

transform: scale3d(1, 1, 1); /* element is unchanged */
transform: scale3d(2, 2, 2); /* element looks twice as its original size */
transform: scale3d(1, 2, 0); 
transform: scale3d(2, 1, 3);
transform: scale3d(-1, -1, -1);

تابع تبدیل rotate3d

تابع تبدیل ()rotate3d نسخه سه بعدی تابع ()rotate است و عنصر را در فضای سه بعدی می‌چرخاند. این تابع یک بردار چهار تایی به شکل زیر دریافت می‌کند که سه عنصر اول، جهت چرخش را در قالب یک بردار سه تایی مشخص می‌کنند و مقدار چهارم هم مقدار زاویه چرخش را تعیین می‌کند.

transform: rotate3d( <number> , <number> , <number> , <angle> );

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

چرخش سه بعدی

transform: rotate3d(1, 1, 2, 45deg);
transform: rotate3d(2, 1, 3, 33deg);
transform: rotate3d(1, 0, 0, 45deg); /* element is rotated clockwise along the x-axis by 45deg */
transform: rotate3d(0, 1, 0, 45deg); /* element is rotated clockwise along the y-axis by 45deg */
transform: rotate3d(0, 0, 1, 45deg); /* element is rotated clockwise along the z-axis by 45deg */
transform: rotate3d(0, 0, 0, 50deg); /* NO ROTATION IS APPLIED */
                        

تصویر زیر، نتیجه اعمال تبدیل rotate3d(1,1,1,50deg) به یک تصویر را نشان می‌دهد:

نمونه چرخش سه بعدی

تابع تبدیل rotateX

تابع rotateX() برای چرخش عنصر در فضای سه بعدی و حول محور x استفاده می‌شود. این تبدیل معادل با تبدیل زیر است:

transform: rotate3d(1, 0, 0, <angle>)

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

transform: rotateX(30deg);
transform: rotateX(-135deg);
transform: rotateX(90deg);

تصویر زیر، نتیجه اعمال تبدیل‌های rotate(50deg) و rotate(-50deg) را روی یک عکس نشان می‌دهد:

چرخش حول محور x

تابع تبدیل rotateY

تابع تبدیل rotateY() ، عنصر را در فضای سه بعدی و حول محور y می‌چرخاند. این تبدیل معادل با تبدیل زیر است:

transform: rotate3d(0, 1, 0,<angle> );

این تبدیل، به عنوان ورودی یک زاویه دریافت می‌کند که مقدار چرخش حول محور z را نشان می‌دهد.

transform: rotateY(30deg);
transform: rotateY(-135deg);
transform: rotateY(90deg);

تصویر زیر نتیجه اعمال تبدیل rotate(50deg) و rotate(-50deg) را روی تصویر نشان می‌دهد:

چرخش حول محور y

تابع تبدیل rotateZ

تابع تبدیل rotateZ() برای چرخش عنصر در فضای سه بعدی و حول محور z استفاده می‌شود. این تبدیل معادل تبدیل زیر است:

transform: rotate3d(0, 0, 1, <angle>);

 این تبدیل، یک زاویه به عنوان ورودی دریافت می‌کند که میزان چرخش حول محور z را نشان می‌دهد.

transform: rotateZ(30deg);
transform: rotateZ(-135deg);
transform: rotateZ(90deg);

تصویر زیر، نتیجه اعمال تبدیل rotateZ(50deg) و rotateZ(-50deg) را روی تصویر نشان می‌دهد:

چرخش حول محور z

 

 بیشتر بخوانید:

ایجاد چشم انداز در css  

چشم انداز

 

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

فاصله صفحه z=0 تا چشم مخاطب

 

برای اضافه کردن چشم انداز به عنصر، می‌توان از تابع perspective() یا ویژگی perspective استفاده کرد. تفاوت اصلی بین این دو مورد آن است که تابع perspective() برای عنصری تعریف می‌شود که در فضای سه بعدی تبدیل شده است. درحالی که ویژگی perspective به عنصری اعمال می‌شود که عناصر فرزند آن در فضای سه بعدی تبدیل می‌شود.  

تابع perspective() ، یک مقدار به عنوان پارامتر ورودی دریافت می‌کند. هرچه مقدار کوچکتر باشد، صفحه z به مخاطب نزدیکتر می‌شود و تاثیر آن چشمگیرتر خواهد بود. هرچه این پارامتر ورودی بزرگتر باشد، عنصر از صفحه نمایش دورتر می‌شود و تاثیر آن نامحسوس‌تر خواهد بود. 

transform: perspective(<length>)

زمانی که از توابع تبدیل سه بعدی استفاده می‌کنید، تابع perspective() یا ویژگی perspective فضای سه بعدی را فعال می‌کند و اگر این تابع را مشخص نکنید، به نظر می‌رسد که عنصر دو بعدی و مسطح است.

 برای مثال، اگر قصد دارید عنصر را با استفاده از تابع rotateY() ، حول محور y بچرخانید، لازم است که برای انجام این تبدیل سه بعدی، فضای سه بعدی هم ایجاد کنید و برای این کار باید ابتدا یک چشم انداز تعریف کنید. در غیر این صورت، چرخش به صورت مسطح و دو بعدی به نظر می‌رسد. تصویر زیر چندین عکس را نشان می‌دهد که دو تا از آنها در فضای سه بعدی با چشم انداز چرخانده شده و دو عکس دیگر در فضایی بدون چشم انداز چرخانده شده است:

مقایسه داشتم و نداشتن چشم انداز در تبدیل سه بعدیاگر چند عنصر دارید که در فضای سه بعدی تبدیل شده است و همگی متعلق به یک مخزن هستند، بهتر است به جای اینکه برای هریک از عناصر به طور جداگانه ویژگی perspective را تعریف کنید، این ویژگی را تنها برای عنصر والد تعریف کنید.

چند نمونه 

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

div {
    /* general styles here... */
    width: 100px;
    height: 100px;
    background-color: #0099CC;
    /* transformation */
    transform: translate(80px, 80px) rotate(45deg) scale(1.5, 1.5);
}

 

چند تبدیل دو بعدی

 در نمونه کد زیر، از تبدیل‌های سه بعدی استفاده شده است. ابتدا عنصر حول محور y چرخانده می‌شود و سپس در راستای محور z انتقال داده می‌شود. همچنین با استفاده از تابع ()perspective، برای عنصر چشم انداز تعریف شده است:

.element {
  transform: perspective(800px) rotateY(90deg) translateZ(300px);
}

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

.parent {
    /* ... */
    perspective: 800px;
}
.child {
    /* ... */
    transform: rotateY(90deg) translateZ(300px);
}

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

متاسفانه فقط اعضای سایت قادر به ثبت دیدگاه هستند

برترین های