آموزش انیمیشن‌سازی با CSS
در این قسمت از آموزش انیمشن‌سازی در CSS قصد داریم به طور کلی به آموزش کار با Skew در CSS بپردازیم. همانطور که می‌دانید انیمیشن‌سازی با استفاده از CSS به راحتی امکان‌پذیر است و می‌توان پروژه‌های جذابی را با استفاده از این زبان ایجاد کرد.
از skew در چه مواردی استفاده می‌شود؟
ممکن است برایتان پیش آمده باشد که بخواهید یک المان خاص را به صورت مورب حرکت دهید. این موضوع در بسیاری از موارد برای بسیاری از کاربران پیش می‌آید. این کار به راحتی با استفاده از skew امکان‌پذیر است. این دستور از شما یک درجه خاص را دریافت می‌کند و با توجه به همان درجه عنصر را به حالت مورب در می‌آورد.
استفاده از این دستور نیز مانند دستور Rotate بسیار ساده است و نکته خاصی ندارد. در ادامه بیشتر به نحوه استفاده از آن می‌پردازیم.
SkewY
در صورتی که از این دستور استفاده کنید عنصر مد نظر در راستای محور Y به صورت مورب در خواهد آمد. انجام این کار بسیار ساده است در صورتی که به درستی آن را درک کنید. به عبارتی اگر از این دستور استفاده کنید عنصر به صورت مورب به اندازه درجه گفته شده از محور Y فاصله می‌گیرد.
استفاده از این دستور جذابیت‌های مربوط به خود را دارد و می‌تواند در موارد خاصی بسیار برای کاربران مفید باشد. در طراحی‌های مدرن معمولا افراد از چنین دستوراتی استفاده می‌کنند تا بهتر به هدف مورد نظرشان برسند. استفاده از Skew بسیار ساده است نمونه استفاده از آن را می‌توانید در کد زیر مشاهده کنید.
|
1 |
transform: skewY(30deg); |
همانطور که دیدیم استفاده از این دستور دقیقا همانند دستورات گذشته است و تفاوت چندانی ندارد. خروجی دستور بالا المانی که در پایین آورده شده است خواهد بود.
همانطور که می‌بینید عنصر مد نظر ما در راستای محور Y به صورت مورب حرکت می‌کند. استفاده از این دستور متداول نیست ولی در طراحی‌های بسیار خاص از آن استفاده می‌شود.
SkewX
همانطور که از نام این دستور پیداست کاملا معکوس دستور پیداست Skewx المان مد نظر را در محور x به حرکت در می‌آورد. این حرکت به صورت مورب است که به اندازه درجه وارد شده عنصر مد نظر از محور x فاصله می‌گیرد. به عبارتی این دستور برعکس دستور قبلی عمل می‌کند و عنصر مد نظر را به صورت مورب برعکس قبلی نشان می‌دهد.
نمونه استفاده از این دستور در کد زیر آورده شده است.
|
1 |
transform: skewx(30deg); |
در دستور بالا گفته شده که عنصر مد نظر به اندازه 30deg از محور x فاصله بگیرد. همانطور که دیدیم این دستور نیز کاملا مانند skewy است و تفاوت چندانی ندارد. در گیف زیر می‌توانید استفاده از دستور بالا را ببینید.
skew
این دستور به عبارتی عنصر را در هر دو طرف به صورت مورب در می‌آورد. دستور Skew عنصر مد نظر را در هر دو سمت به صورت مورب ایجاد می‌کند. نحوه استفاده از این دستور به صورت زیر است.
|
1 |
transform:skew(x,y); |
همانطور که در شبه کد بالا می‌بینید این دستور دو مقدار x,y را دریافت می‌کند که همان دو محور x,y است. به عنوان مثال به کد زیر دقت کنید.
|
1 |
transform: skew(30deg,20deg); |
در دستور بالا 30 درجه از محور x و 20 درجه از محور Y حرکت شده است. به عبارتی حرکت مورب با استفاده از درجه‌های تعیین شده ایجاد می‌شود. انجام این کار بسیار ساده است و اگر دو یا سه بار تمرین کنید به راحتی به آن مسلط می‌شود.
اگر آموزش کار با Skew در CSS را خوبی متوجه نمی‌شوید حتما قسمت بعدی را مطالعه کنید.
قدم بعدی چیست؟
در این دوره سعی شده به طور کلی به نحوه انیمیشن‌سازی در css پرداخته شود. ما در این دوره دانش Html ,css را به عنوان پیش‌نیاز قرار داده‌ایم پس باید قبل از شروع دوره حتما به این دو تسلط لازم را داشته باشید.
در دوره Html , css ما سعی کردیم به طور کلی مباحثی را پوشش دهیم که حتی اگر آشنایی کافی با کامپیوتر را هم نداشته باشید بتوانید از آن استفاده کنید. هم‌چنین اصلا نگران این که بعد از این دوره چه مباحثی را یاد نگرفته‌اید نباشید چرا که بعد از دیدن دوره آموزش Html , css دیگر احتیاجی به آموزش‌های مشابه ندارید.
مطالب زیر را حتما مطالعه کنید
نحوه اضافه کردن کد PHP در وردپرس
دوره رایگان طراحی فروشگاه اینترنتی!
آموزش ایجاد لیست کشویی وابسته به هم در HTML
ساده و بدون هزینه ترفند های عکاسی حرفه ای با موبایل را یاد بگیرید
DOM چیست و چه کاربردی دارد؟
دیدگاهتان را بنویسید