در این قسمت از آموزش انیمشن‌سازی در CSS قصد داریم به طور کلی به آموزش کار با Skew در CSS بپردازیم. همانطور که می‌دانید انیمیشن‌سازی با استفاده از CSS به راحتی امکان‌پذیر است و می‌توان پروژه‌های جذابی را با استفاده از این زبان ایجاد کرد.

ما در قسمت گذشته به آموزش کار با Rotate پرداختیم. همانطور که می‌دانید ما در ابتدای آموزش هستیم ولی موفق شدیم که المان‌های جذابی را تولید کنیم. در این قسمت نیز می‌خواهیم از Skew استفاده کنیم. این دستور نیز جذابیت‌های مربوط به خود را دارد و می‌تواند استفاده مناسبی از آن شود. پس با ما همراه باشید.

از skew در چه مواردی استفاده می‌شود؟

ممکن است برایتان پیش آمده باشد که بخواهید یک المان خاص را به صورت مورب حرکت دهید. این موضوع در بسیاری از موارد برای بسیاری از کاربران پیش می‌آید. این کار به راحتی با استفاده از skew امکان‌پذیر است. این دستور از شما یک درجه خاص را دریافت می‌کند و با توجه به همان درجه عنصر را به حالت مورب در می‌آورد.

استفاده از این دستور نیز مانند دستور Rotate بسیار ساده است و نکته خاصی ندارد. در ادامه بیشتر به نحوه استفاده از آن می‌پردازیم.

SkewY

در صورتی که از این دستور استفاده کنید عنصر مد نظر در راستای محور Y به صورت مورب در خواهد آمد. انجام این کار بسیار ساده است در صورتی که به درستی آن را درک کنید. به عبارتی اگر از این دستور استفاده کنید عنصر به صورت مورب به اندازه درجه گفته شده از محور Y فاصله می‌گیرد.

استفاده از این دستور جذابیت‌های مربوط به خود را دارد و می‌تواند در موارد خاصی بسیار برای کاربران مفید باشد. در طراحی‌های مدرن معمولا افراد از چنین دستوراتی استفاده می‌کنند تا بهتر به هدف مورد نظرشان برسند. استفاده از Skew بسیار ساده است نمونه استفاده از آن را می‌توانید در کد زیر مشاهده کنید.

transform: skewY(30deg);

همانطور که دیدیم استفاده از این دستور دقیقا همانند دستورات گذشته است و تفاوت چندانی ندارد. خروجی دستور بالا المانی که در پایین آورده شده است خواهد بود.

همانطور که می‌بینید عنصر مد نظر ما در راستای محور Y به صورت مورب حرکت می‌کند. استفاده از این دستور متداول نیست ولی در طراحی‌های بسیار خاص از آن استفاده می‌شود.

SkewX

همانطور که از نام این دستور پیداست کاملا معکوس دستور پیداست Skewx المان مد نظر را در محور x به حرکت در می‌آورد. این حرکت به صورت مورب است که به اندازه درجه وارد شده عنصر مد نظر از محور x فاصله می‌گیرد. به عبارتی این دستور برعکس دستور قبلی عمل می‌کند و عنصر مد نظر را به صورت مورب برعکس قبلی نشان می‌دهد.

نمونه استفاده از این دستور در کد زیر آورده شده است.

transform: skewx(30deg);

در دستور بالا گفته شده که عنصر مد نظر به اندازه 30deg از محور x فاصله بگیرد. همانطور که دیدیم این دستور نیز کاملا مانند skewy است و تفاوت چندانی ندارد. در گیف زیر می‌توانید استفاده از دستور بالا را ببینید.

skew

این دستور به عبارتی عنصر را در هر دو طرف به صورت مورب در می‌آورد. دستور Skew عنصر مد نظر را در هر دو سمت به صورت مورب ایجاد می‌کند. نحوه استفاده از این دستور به صورت زیر است.

transform:skew(x,y);

همانطور که در شبه کد بالا می‌بینید این دستور دو مقدار x,y را دریافت می‌کند که همان دو محور x,y است. به عنوان مثال به کد زیر دقت کنید.

transform: skew(30deg,20deg);

در دستور بالا 30 درجه از محور x و 20 درجه از محور Y حرکت شده است. به عبارتی حرکت مورب با استفاده از درجه‌های تعیین شده ایجاد می‌شود. انجام این کار بسیار ساده است و اگر دو یا سه بار تمرین کنید به راحتی به آن مسلط می‌شود.

اگر آموزش کار با Skew در CSS را خوبی متوجه نمی‌شوید حتما قسمت بعدی را مطالعه کنید.

قدم بعدی چیست؟

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

در دوره Html , css ما سعی کردیم به طور کلی مباحثی را پوشش دهیم که حتی اگر آشنایی کافی با کامپیوتر را هم نداشته باشید بتوانید از آن استفاده کنید. هم‌چنین اصلا نگران این که بعد از این دوره چه مباحثی را یاد نگرفته‌اید نباشید چرا که بعد از دیدن دوره آموزش Html , css دیگر احتیاجی به آموزش‌های مشابه ندارید.

شما می‌توانید از طریق لینک زیر اقدام به دریافت دوره آموزشی گفته شده کنید.

آموزش html , css

سخن آخر

در این مقاله سعی شد به طور کلی به آموزش کار با Skew در CSS پرداخته شود. همانطور که می‌دانید در طراحی‌های مدرن بسیار از انیمیشن‌سازی در css استفاده می‌شود تا حجم صفحات تا حد ممکن کاهش پیدا کند. با به دست آوردن این تخصص می‌توانید به راحتی کسب‌وکار خودتان را رشد دهید و به اهداف خودتان دست پیدا کنید.

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

نوشته آموزش انیمیشن‌سازی با CSS | آموزش کار با Skew اولین بار در ادمین سایت. پدیدار شد.