تبدیل های سه بعدی (3D Transforms)
اینجا با «تبدیل های سه بعدی CSS» آشنا می شویم. «تبدیل (Transform)» یعنی چرخاندن، جابه جایی، یا تغییر اندازه یک عنصر. در سه بعدی، محورهای X و Y و Z داریم؛ مثل جعبه واقعی روی میز.
rotateX()؛ چرخش دور محور افقی
تابع rotateX() عنصر را دور محور X می چرخاند. مثل بالا و پایین کردن درِ لپ تاپ.
#myDiv {\n transform: rotateX(150deg);\n}\nrotateY()؛ چرخش دور محور عمودی
تابع rotateY() عنصر را دور محور Y می چرخاند. مثل باز و بسته شدن درِ کمد.
#myDiv {\n transform: rotateY(150deg);\n}\nrotateZ()؛ چرخش در صفحه
تابع rotateZ() دور محور Z می چرخاند. این شبیه چرخش دوبعدی است.
#myDiv {\n transform: rotateZ(90deg);\n}\nمراحل تمرین سریع
- یک جعبه بساز و شناسه بده.
- مقدار transform را یکی یکی تغییر بده.
- درجه ها را کم وزیاد کن و نتیجه را ببین.
برای مرور پایه ها، صفحه تبدیل های دو بعدی را ببین. برای حرکت نرم، به Transitions سر بزن. همین صفحه تبدیل های سه بعدی CSS را نشانه گذاری کن.
جمع بندی سریع
- rotateX برای بالا/پایین کردن است.
- rotateY برای چرخش مثل درِ کمد است.
- rotateZ مثل چرخش در صفحه است.
- زاویه بیشتر، چرخش بیشتر می دهد.
- همیشه در ادیتور تست کن.