دنیای برنامه نویسی و اپلیکیشن

baner-telegram
شما اینجا هستید : صفحه اول » طراحی سایت » آموزش CSS3 » فیلم آموزش Transform در CSS3
فیلم آموزش Transform در CSS3

فیلم آموزش Transform در CSS3

در این قسمت از فیلم آموزش CSS3 درباره دستور Transform آموزش داده شده است ، در آموزش Transform اول در مورد کاربرد ها و خود دستور Transform آموزش داده شده است و بعد از آن درباره تک تک متدهای ( توابع ) دستور transform آموزش داده شده است .

 دستور Transform چیست ؟

با استفاده از دستور transform در CSS3 می توان مکان ، شکل و یا وضعیت یک عنصر را تغییر داد و این تغیر می تواند در حالت دو بعدی باشد یا در حالت سه بعدی باشد . نحوه مقدار دادن به این ویژگی transform  یکم فرق داره یعنی باید از متدها یا توابع استفاده کنیم و هر کدام از این توابع کارهای خاصی را انجام می دهند که در ادمه با آن ها آشنا می شویم .

ویژگی transform-orgin :

با استفاده از این ویژگی ما می توانیم مبدا مختصات عنصر مورد نظر را مشخص کنیم . به صورت پیش فرض مبدا مختصات ما  بالا سمت چپ عنصر است که با استفاده از این ویژگی می توانیم هر گوشه از عنضر را انتخاب کنیم و تغییراتی که در عنصر می نویسیم از آن جهت اعمال شود .

متد Translate :

با استفاده از این تابع می تونیم عنصر مورد نظر رو از یه نقطه به نقطه دیگه ای توی حرکت بدیم و کد این دستور translate به صورت زیره :

در این تابع مقدار اول مشخص کننده مقدار حرکت در محور X است و مقدار دوم مشخص کننده حرکت در محور Y است . در دادن مقدار به این تابع translate می توانید از درصد هم استفاده کنید .

متد rotate :

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

کد CSS : 

کد HTML : 

متد Scale :

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

متد skew :

از این متد skew می تونیم برای مورب کردن یا کج کردن عناصر استفاده بکنیم و مقدار اون به صورت درجه است .

این هایی که تا الان گفتیم Transform در حالت دو بعدی بودند برای حالت سه بعدی هم می تونید از Transform استفاده کنید که اون رو هم در فیلم آموزش Transform گفتیم و می تونید فیلم رو تماشا کنید .

نکات بیش تر رو می تونید در فیلم آموزش Transform یاد بگیرید .

پیشنهاد می کنیم حتما بخوانید :

درباره : رضا طوماری

عاشق برنامه نویسی

نظرات کاربران :


  1. ماشین کنترلی گفت:

    بنده از مطالب سایت شما لذت بردم و استفاده کردم تبریک میگم سایت خوبی طراحی کردید

  2. پانل گفت:

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

  3. خرید کواد کوپتر گفت:

    ممنونم از آموزش عالیتون

  4. خرید آهن گفت:

    متشکرم از مطالبی که به اشتراک میذارید،موفق باشید

  5. دوره آمادگی ielts گفت:

    سلام با تشکر از مطالب مفید و جامعی که در سایت قرار دادید

جواب سوال چیه ؟ *