جلسه ی هجدهم: استایل transform

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

 

استایل transform چیست؟

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

  1. rotate
  2. skew
  3. scale
  4. translate

استایل transform rotate

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

واحد مقادیری که به حالت rotate می دهیم deg می باشد برای مثال زمانی که بخواهیم یک عنصر ۱۲۰ درجه بچرخد باید از کد زیر استفاده کنیم:

کد HTML:


<img src="image/img.jpg" alt="">

کد CSS:


img {

transform: rotatex(120deg);

}

خروجی کد بالا:

استایل transform rotate

اما این تمام ویژگی این خاصیت نمی باشد استایل transform rotate در دو جهت x و  y نیز به صورت مستقل می تواند گردش داشته باشد.

 

حالت rotatex: در این ویژگی عکس نسبت به محور xها(افقی) تغییر زاویه می دهد. برای مثال به عکس زیر توجه کنید که ۱۸۰ درجه در راستای محور xها چرخیده است. به نمونه کد زیر توجه کنید:

کد HTML:


<img src="image/img.jpg" alt="">

کد CSS:


img {

transform: rotatex(180deg);

}

خروجی کد بالا:

استایل transform rotate

حالت rotatey: در این ویژگی عکس نسبت به محور yها(عمودی) تغییر زاویه می دهد. برای مثال به عکس زیر توجه کنید که ۱۸۰ درجه در راستای محور yها چرخیده است. به نمونه کد زیر توجه کنید:

کد HTML:


<img src="image/img.jpg" alt="">

کد CSS:


img {

transform: rotatey(180deg);

}

خروجی کد بالا:

استایل transform rotate

 

استایل transform skew

از حالت skew برای کج نمودن و انحراف عناصر استفاده می شود یعنی اگر جسم را مانند یک صفحه در مقابل خود قرار بگیریم می توانیم به آن زاویه ی دلخواه خود را بدهیم به نوعی مانند یک فضای سه بعدی می باشد، برای مثال شکل زیر ۴۰ درجه کج شده است برای فهم بیشتر به نمونه کد زیر توجه کنید:

کد HTML:


<img src="image/img.jpg" alt="">

کد CSS:


img {

transform: skew(40deg);

}

خروجی کد بالا:

استایل transform skew

نکته: حالت skew نیز مانند حالت rotate دارای حالت های x و y می باشد. (اگه دوست داشتید می تونید خودتون امتحان کنید تا کار براتون جالب تر بشه 🙂 )

نکته: واحد دریافتی حالت skew نیز مانند حالت  rotateدرجه(deg) می باشد.

 

استایل transform scale

از حالت scale برای برای چند برابر کردن اندازه ی اجسام استفاده می شود عددی که این مقدار را تعیین می کند واحد ندارد و یک عدد حقیق است اگر آن را یک بگذاریم خود شکل نمایش داده می شود، در صورتی که آن را بزرگتر از یک بگذاریم جسم بزرگتر شده و در صورتی که آن را کوچکتر از یک بگذاریم جسم به همان نسبت کوچکتر می شود. برای مثال به جسم زیر ۱٫۵ برابر شده است به نمونه کد زیر توجه کنید:

کد HTML:


<img src="image/img.jpg" alt="">

کد CSS:


img {

transform: scale(1.5);

}

خروجی کد بالا:

استایل transform scale

در صورتی که بخواهیم در ابعاد مختلف تصویر خود را بزرگ و کوچک نماییم از دو عدد استفاده می کنیم که توسط کاما (,) از هم جدا می شوند عدد اول تعیین می کند که عرض عنصر چند برابر شود عدد دوم چند برابری طول عنصر را مشخص می نماید. برای مثال تصویر زیر از عرض نصف شده و از طول دوبرابر به نمونه کد زیر توجه کنید:

کد HTML:


<img src="image/img.jpg" alt="">

کد CSS:


img {

transform: scale(2,0.5);

}

خروجی کد بالا:

استایل transform scale

 

نکته: حالت scale علاوه بر حالت های x و y دارای حالت های z و ۳d هم می باشد.

در حالت های scalez و scale3d با تغییر اندازه ی در نمای کلی عنصر ما عموما در ظاهر تغییری ایجاد نمی شود یعنی تغییرات به گونه ای نیست که به چشم ما بیاید. (عموما کاربرد زیادی نداره خودتون رو درگیرش نکنید 🙂 )

 

استایل transform translate

از حالت translate برای جا به جایی اجسام در صفحه استفاده می شود. این ویژگی دو پارامتر می گیرد که توسط علامت کاما (,) از هم جدا می شوند. عدد اول جسم را در راستای محور xها (افقی) جا به جا می کند و عدد دوم جسم را در راستای محور yها (عمودی) جا به جا می نماید. برای مثال جسم زیر از مکان اولیه ی خود ۵۰px به سمت راست و ۳۰px به سمت پایین حرکت نموده است به نمونه کد زیر توجه کنید:

کد HTML:


<img src="image/img.jpg" alt="">

کد CSS:


img {

transform: translate(50px,30px);}

خروجی کد بالا:

استایل transform translate

 

خلاصه مطلب:

  1. از استایل transform برای ایجاد نوعی از جلوه های ویژه با تغییر وضعیت عناصر استفاده می شود.
  2. از حالت rotate برای چرخش عنصر مورد نظر خود در جهت عقربه های ساعت استفاده می کنیم.
  3. در صورتی که بخواهیم عنصر مورد نظر ما بر خلاف جهت عقربه های ساعت بچرخد باید درجه ی وارد شده ی ما منفی باشد.
  4. از حالت skew برای کج نمودن و انحراف عناصر استفاده می شود یعنی اگر جسم را مانند یک صفحه در مقابل خود قرار بگیریم می توانیم به آن زاویه ی دلخواه خود را بدهیم به نوعی مانند.
  5. از حالت scale برای برای چند برابر کردن اندازه ی اجسام استفاده می شود.
  6. در صورتی که بخواهیم در ابعاد مختلف تصویر خود را بزرگ و کوچک نماییم از دو عدد استفاده می کنیم که توسط کاما (,) از هم جدا می شوند عدد اول تعیین می کند که عرض عنصر چند برابر شود عدد دوم چند برابری طول عنصر را مشخص می نماید.
  7. از حالت translate برای جا به جایی اجسام در صفحه استفاده می شود. این ویژگی دو پارامتر می گیرد که توسط علامت کاما (,) از هم جدا می شوند.
ابوالفضل کلهری

فعال در زمینه های ui و ux و طراحی وب سایت مسلط به زبان های نشانه گذاری HTML و CSS و همچنین در زمینه ی آموزش زبان های HTML و CSS نیز فعالیت دارم . امیدوارم با آموزش هایی که در این سایت قرار می دهم موجب پیشرفت شما عزیزان باشم.

دیدگاه ها
  • قبل از ارسال دیدگاه خود قوانین بخش دیدگاه ها را مطالعه کنید. ارسال دیدگاه به معنی پذیرش این قوانین است. قوانین بخش دیدگاه ها