در این قسمت از فیلم آموزش CSS3 درباره دستور Transform آموزش داده شده است ، در آموزش Transform اول در مورد کاربرد ها و خود دستور Transform آموزش داده شده است و بعد از آن درباره تک تک متدهای ( توابع ) دستور transform آموزش داده شده است .
دستور Transform چیست ؟
با استفاده از دستور transform در CSS3 می توان مکان ، شکل و یا وضعیت یک عنصر را تغییر داد و این تغیر می تواند در حالت دو بعدی باشد یا در حالت سه بعدی باشد . نحوه مقدار دادن به این ویژگی transform یکم فرق داره یعنی باید از متدها یا توابع استفاده کنیم و هر کدام از این توابع کارهای خاصی را انجام می دهند که در ادمه با آن ها آشنا می شویم .
ویژگی transform-orgin :
با استفاده از این ویژگی ما می توانیم مبدا مختصات عنصر مورد نظر را مشخص کنیم . به صورت پیش فرض مبدا مختصات ما بالا سمت چپ عنصر است که با استفاده از این ویژگی می توانیم هر گوشه از عنضر را انتخاب کنیم و تغییراتی که در عنصر می نویسیم از آن جهت اعمال شود .
متد Translate :
با استفاده از این تابع می تونیم عنصر مورد نظر رو از یه نقطه به نقطه دیگه ای توی حرکت بدیم و کد این دستور translate به صورت زیره :
transform: translate(100px , 200px);
در این تابع مقدار اول مشخص کننده مقدار حرکت در محور X است و مقدار دوم مشخص کننده حرکت در محور Y است . در دادن مقدار به این تابع translate می توانید از درصد هم استفاده کنید .
متد rotate :
از تابع rotate برای چرخش دادن به عناصر استفاده می کنیم ، مثلاً اگر بخواهید یک عکس را 45 درجه بچرخانید می توانید از این تابع استفاده کنید و مقدار آن هم باید به صورت درجه باشد .
کد CSS :
img{
transform: rotate(45deg);
}
کد HTML :
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>وب سیتی</title> <link rel="stylesheet" type="text/css" href="style.css" /> </head> <body> <div> <img src="test.png"> </div> </body> </html>
متد Scale :
با استفاده از این متد می توانیم اندازه عنصر را کوچک و بزرگ نماییم و مقداری که به این متد می دهیم باید مقدار مشخصی باشد که در فیلم آموزش Transform گفته شده است .
img{
transform: scale(2 , 3);
}
متد skew :
از این متد skew می تونیم برای مورب کردن یا کج کردن عناصر استفاده بکنیم و مقدار اون به صورت درجه است .
div{
transform: skew(100deg , 45deg);
}
این هایی که تا الان گفتیم Transform در حالت دو بعدی بودند برای حالت سه بعدی هم می تونید از Transform استفاده کنید که اون رو هم در فیلم آموزش Transform گفتیم و می تونید فیلم رو تماشا کنید .
عالی درجه۱
ممنون از مطالب خوبتون عالی بود
این فیلم توهین به شعور مخاطب بود واقعا
چرا دوست عزیز میشه دلیل تون رو بگید .
مطالب بسیار عالی و مفید با یادگیری آسان دارید ،سپاس
برنامه نویسی اونقدر گسترده ست که واقعا هر چی یاد بگیری باز هم کمه
بنده از مطالب سایت شما لذت بردم و استفاده کردم تبریک میگم سایت خوبی طراحی کردید
از بابت اینکه مقالات آموزشی خیلی خوب و با کیفیت تولید می کنید از شما سپاسگزاریم.
ممنونم از آموزش عالیتون
متشکرم از مطالبی که به اشتراک میذارید،موفق باشید
سلام با تشکر از مطالب مفید و جامعی که در سایت قرار دادید