تبدیل سه بعدی در css
خوش اومدین به بیست و دومین جلسه از دوره آموزش رایگان CSS. ما در جلسه قبلی در مورد تبدیل های دوبعدی در CSS صحبت کردیم. در این جلسه قرار هست که با تبدیل سه بعدی در CSS آشنا بشیم. همونطور که از عنوان این موضوع مشخص هست قراره که یک سری جابجایی های 3D رو با همدیگه یاد بگیریم. پس با من در این جلسه همراه باشید تا تبدیل سه بعدی یا همون تبدیل 3D در CSS رو با همدیگه یاد بگیریم.
ما با استفاده از توابع جابجایی و تبدیل عناصر دو بعدی، عناصر خودمون رو به نسبت محور x و y تنظیم کردیم. طبیعتا در این جلسه با استفاده از توابع جدیدی این تغییرات رو نسبت به محورهای x و y و z تنظیم میکنیم.
ما از ویژگی transform استفاده میکردیم و توابع دوبعدی رو فراخوانی میکردیم. برای توابع سه بعدی هم از همین ویژگی استفاده میکنیم. در بخش اول با توابعی که به ما این امکان رو میدن که عنصر خودمون رو بچرخونیم آشنا میشیم. این توابع عبارتند از:
- rotateX()
- rotateY()
- rotateZ()
تابع rotateX
این تابع به ما کمک میکنه که عنصر موردنظر خودمون رو به مقدار پارامتری که برحسب درجه در داخل پرانتز وارد میکنیم در جهت محور xها بچرخونیم.
نمونه کد زیر رو ببینید:
#myDiv {
transform: rotateX(150deg);
}
من در قطعه کد بالا برای آی دی myDiv ویژگی transform رو استفاده کردم و با استفاده از تابع rotateX و مقدار 150deg این عنصر رو 150 درجه به نسبت محور Xها چرخوندم. این چرخش در جهت حرکت عقربه های ساعت انجام میشه. ما میتونیم از مقدار درجه منفی هم استفاده کنیم با این کار جهت چرخش رو تغییر میدیم.
تابع rotatY
این تابع به ما کمک میکنه که عنصر موردنظر خودمون رو به مقدار پارامتری که بر حسب درجه در داخل پرانتز وارد میکنیم در جهت محور y بچرخونیم.
نمونه کد زیر رو ببینید:
#myDiv {
transform: rotateY(150deg);
}
من در قطعه کد بالا برای آی دی myDiv ویژگی transform رو استفاده کردم و با استفاده از تابع rotateY و مقدار 150deg این عنصر رو 150 درجه به نسبت محور Yها چرخوندم. این چرخش در جهت حرکت عقربه های ساعت انجام میشه. ما میتونیم از مقدار درجه منفی هم استفاده کنیم با این کار جهت چرخش رو تغییر میدیم.
تابع rotateZ
این تابع به ما کمک میکنه که عنصر موردنظر خودمون رو به مقدار پارامتری که بر حسب درجه در داخل پرانتز وارد میکنیم در جهت محور Z بچرخونیم.
نمونه کد زیر رو ببینید:
#myDiv {
transform: rotateZ(90deg);
}
من در قطعه کد بالا برای آی دی myDiv ویژگی transform رو استفاده کردم و با استفاده از تابع rotateZ و مقدار 90deg این عنصر رو 90 درجه به نسبت محور Zها چرخوندم. این چرخش در جهت حرکت عقربه های ساعت انجام میشه. ما میتونیم از مقدار درجه منفی هم استفاده کنیم با این کار جهت چرخش رو تغییر میدیم.
همه توابع سه بعدی transofrm
نحوه استفاده و بکارگیری تمامی متدهای سه بعدی که برای ویژگی transform همانند مثالها و توابع بالاست. من در این قسمت لیست کامل همه آنها رو ذکر میکنم و توضیح مختصری در مورد هر کدوم میگم:
تابع translate3d
این تابع یک انتقال سه بعدی رو تعریف میکنه. این تابع سه مقدار x,y,z رو میگیره که هر کدوم نشاندهنده مختصات مقصد این انتقال هستند.
تابع translateX
این تابع یک انتقال سه بعدی رو در محور x ها تعریف میکنه. این تابع یک مقدار برحسب درجه میگیره که نشاندهنده مقصد این انتقال در محور xهاست.
تابع translateY
این تابع یک انتقال سه بعدی رو در محور y ها تعریف میکنه. این تابع یک مقدار برحسب درجه میگیره که نشاندهنده مقصد این انتقال در محور yهاست.
تابع translateZ
این تابع یک انتقال سه بعدی رو در محور z ها تعریف میکنه. این تابع یک مقدار برحسب درجه میگیره که نشاندهنده مقصد این انتقال در محور zهاست.
تابع scale3d
این تابع یک تغییر اندازه سه بعدی رو ایجاد میکه. این تابع سه مقدار x,y,x رو میگیره که هر کدوم نشاندهده تغییر اندازه در محورهای مختلف هست.
تابع scaleX
این تابع یک تغییراندازه سه بعدی رو در محور x ها تعریف میکنه. این تابع یک مقدار برحسب درجه میگیره که نشاندهنده مقصد این تغییراندازه در محور xهاست.
تابع scaleY
این تابع یک تغییراندازه سه بعدی رو در محور y ها تعریف میکنه. این تابع یک مقدار برحسب درجه میگیره که نشاندهنده مقصد این تغییراندازه در محور yهاست.
تابع scaleZ
این تابع یک تغییراندازه سه بعدی رو در محور z ها تعریف میکنه. این تابع یک مقدار برحسب درجه میگیره که نشاندهنده مقصد این تغییراندازه در محور zهاست.
تابع rotate3d
این تابع امکان یک چرخش سه بعدی رو تعریف میکنه. این تابع ۴ مقدار میگیره که اعداد اول، دوم و سوم به ترتیب مختصات محور x,y,z است و مقدار چهارم درجه چرخش هست.
تابع prespective
این تابع یک نمای prespective رو برای یک عنصر بصورت ۳ بعدی تعریف میکنه
برای تمامی توابع بالا در داخل ویدیو این جلسه مثالهایی گفتم. پیشنهاد میکنم ویدیو این جلسه رو ببینید
