جلسه ۷۴ – تبدیلات دو بعدی در CSS

تغییر فرم یا transform دو بعدی در CSS

تبدیلات دو بعدی
تبدیلات دو بعدی

تبدیلات دو بعدی، چه تبدیلاتی هستن؟ و ما چطور از تبدیلات دو بعدی می‌تونیم استفاده کنیم؟

پشتیبانی مرورگر ها از تبدیلات دو بعدی به چه صورته؟

تو این مقاله، به این سوالات پاسخ می‌دیم و تبدیلات دو بعدی رو کنار هم دیگه یاد می‌گیریم.

خاصیت transform

برای استفاده از تبدیلات دو بعدی، از خاصیت transform استفاده می‌کنیم.

این خاصیت،‌ می‌تونه عملیات زیر رو بر روی عناصر انجام بده:

  • بزرگ و کوچیک کردن عنصر
  • انتقال دادن عنصر
  • چرخوندن دادن عنصر
  • انحراف دادن عنصر

حالا ببینیم که هر کدوم از این تبدیل ها، توسط چه مقداری به انجام می‌رسن؟

بزرگ و کوچیک کردن عناصر

برای این منظور، ما از مقدار ()scale استفاده می‌کنیم.

این مقدار، به دو شکل دیگه هم می‌تونه نوشته بشه. به شکل زیر توجه کنین:

()scale در CSS

همونطور که تو شکل هم می‌بینیم، این مقدار می‌تونه به اشکال مختلفی، ابعاد عنصر ما رو تغییر بده.

مقدار ()scale، با توجه به ورودی خودش،‌ ابعاد عنصر رو چند برابر می‌کنه.

این مقدار، رو خاصیت های width، height، font-size و padding تاثیرگذاره.

همچنین مقدار ()scale، می‌تونه با قبول کردن ورودی ها بین ۰ و ۱، ابعاد عناصر رو کوچیک تر کنه.

به مثال زیر توجه کنین:

<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
<div class="box4"></div>
/* --- تعریف ابعاد اولیه عناصر --- */
div{
   margin:40px;
   width:50px;
   height:50px;
   background-color:lightgreen;
}
/* --- تغییر ابعاد در راستای عمودی و افقی --- */
div.box1{
   transform:scale(1,1.5);
}
/* --- تغییر ابعاد در راستای افقی --- */
div.box2{
   transform: scale(1.5);
}
/* --- تغییر ابعاد در راستای افقی --- */
div.box3{
   transform: scaleX(1.5);
}
/* --- تغییر ابعاد در راستای عمودی --- */
div.box4{
   transform: scaleY(1.5);
}

نتیجه کد رو به شکل زیر مشاهده می‌کنیم:

مثال ()scale در CSS

نکته: مقدار ()scale در صورت داشتن تنها یک ورودی، تغییر ابعاد رو در راستای X انجام خواهد داد.

انتقال دادن عناصر

این امر، با استفاده از مقدار ()translate انجام می‌شه. برای درک کاربرد این مقدار، به تصویر زیر توجه کنین:

()translate در CSS

انتقال هر عنصر، با توجه به موقعیت اون در صفحه انجام می‌شه. به مثال زیر توجه کنین:

<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
/* --- تعریف ابعاد اولیه عناصر --- */
div{
   width:50px;
   height:50px;
   background-color:lightgreen;
}
/* --- انتقال در راستای عمودی و افقی --- */
div.box1{
   transform: translate(20px,-5px);
}
/* --- انتقال در راستای افقی --- */
div.box2{
   transform: translateX(100px);
}
/* --- انتقال در راستای عمودی --- */
div.box3{
   transform: translateY(15pt);
}

کد فوق، نتیجه زیر رو به ما می‌ده:

مثال از ()translate در CSS

دوران دادن عناصر

با استفاده از مقدار ()rotate، می‌تونیم عناصر خودمون رو دوران بدیم. نحوه نوشتار این مقدار به فرم زیره:

()rotate در CSS

این مقدار، با توجه به زاویه ورودی، عنصر رو در جهت ساعتگرد می‌چرخونه.

همچنین، این مقدار،‌مقادیر منفی رو هم قبول می‌کنه. در اون صورت،‌جهت دوران پادساعتگرد خواهد بود.

برای درک بهتر، به مثال زیر توجه کنین:

<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
/* --- تعریف ابعاد اولیه عناصر --- */
div{
   width:100px;
   height:50px;
   background-color:indianred;
   margin:40px;
}
/* --- بدون دوران --- */
div.box1{
   transform: rotate(0);
}
/* --- دوران در راستای ساعتگرد --- */
div.box2{
   transform: rotate(45deg);
}
/* --- دوران در راستای پادساعتگرد --- */
div.box3{
   transform: rotate(-150deg);
}

نتیجه کد بالا، به شکل زیر نمایش داده می‌شه:

مثال از ()rotate در CSS

اگه تو جایی از مطالب براتون ابهام یا سوال پیش اومد، حتما تو قسمت نظرات میزفا مطرح کنین. من و تیم میزفا کنارتون هستیم 🙂

منحرف کردن عناصر

ما توسط مقدار ()skew، می‌تونیم عنصرمون رو از حالت کاملا متقارن، به حالت منحرف و نامتوازن در بیاریم.

برای این منظور از سینتکس زیر استفاده می‌کنیم:

()skew در CSS

حالا این انحراف دادن ها چطور کار می‌کنن؟

به تصویر زیر از این آموزش طراحی وب سایت توجه کنین:

منطق ()skew در CSS

همونطور که می‌بینیم، مقدار ()skewX باعث می‌شه که عنصر ما با محور y زاویه مورد نظر رو بسازه.

همچنین، مقدار ()skewY باعث می‌شه که عنصر با محور x زاویه مورد نظر ما رو بسازه.

برای درک بهتر این مسئله، به مثال زیر دقت کنین:

<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
div{
   width:100px;
   height:50px;
   background-color:indianred;
   margin:40px;
}
div.box1{
   transform: skew(10deg,10deg);
}
div.box2{
   transform: skewX(20deg);
}
div.box3{
   transform: skewY(20deg);
}

کد بالا، نتیجه زیر رو بهمون می‌ده:

مثال ()skew در CSS

استفاده از چندین تبدیل

یکی دیگه از قابلیت های خاصیت transfrom، اینه که ما می‌تونیم چندین تبدیل رو توسط اون انجام بدیم.

به مثال زیر توجه کنین:

<div>
</div>
div{
   width:200px;
   height:100px;
   background-color:red;
   margin:50px;
   transform: scale(0.9) rotate(25deg) skewX(10deg) translate(10px);
}

توسط کد فوق،‌ می‌تونیم نتیجه پایین رو مشاهده کنیم:

استفاده از چندین تبدیل در CSS

همونطور که می‌بینیم، می‌تونیم با ذکر چندین مقدار تو یک خاصیت transfrom،‌ چندین تغییر رو اعمال کنیم.

اما برای خلاصه تر کردن این مقادیر به یک مقدار،‌چی کار می‌تونیم بکنیم؟

مقدار ()matrix

توسط این مقدار،‌ می‌تونیم تمامی تبدیلات مورد نظرمون رو به صورت خلاصه در قالب یک مقدار بنویسیم.

به مثال بخش قبل یک بار دیگه دقت کنین:

استفاده از چندین تبدیل در CSSکد مثال بالا به شکل زیر می‌تونه نوشته بشه:

/* ---  استفاده از چندین تبدیل  --- */
transform: scale(0.9) rotate(25deg) skewX(10deg) translate(10px);
/* --- استفاده از یک تبدیل --- */
transform: matrix(0.815677, 0.380356, -0.236531, 0.882744, 8.15677, 3.80356);

نوشتن ورودی های مقدار ()matrix به صورت دستی، کار عاقلانه ای نیست، چون تئوری چندان ساده ای پشتش قرار نگرفته.

به همین دلیل، می‌تونیم از ابزار های آنلاین برای تبدیل چند تبدیل، به یک تبدیل استفاده کنیم.

یکی از سایت هایی که این کار رو برای ما انجام می‌ده، سایت meyerweb.com هست.

وب سایت تبدیل چندین تبدیل CSS به یک تبدیل

 

کافیه تبدیل مورد نظرمون رو تو input مشخص شده بنویسیم و با زدن یکی از دکمه های قرمز یا آبی، تبدیل دیگه رو تحویل بگیریم 🙂

پشتیبانی مرورگر

پشتیبانی مرورگر ها از تبدیلات دو بعدی در CSS به صورت زیره:

  • Firefox: از نسخه ۳.۵ به بعد پشتیبانی می‌شن.
  • chrome: تمام نسخه ها
  • safari: از نسخه ۳.۱ به بعد
  • IE: از نسخه ۹ به بعد
  • opera: از نسخه ۱۰.۵ به بعد

پایان ترم – یک سوال استک اور فلویی!

وب سایت stackoverflow.com، وب سایتیه که برنامه نویس ها در اون مشکلاتشون رو مطرح می‌کنن، و برنامه نویس های دیگه بهشون برای حل اون مشکل یاری میرسونن. سوال زیر یکی از نمونه سوالات پرسیده شده در stackoverflow هست و از شما انتظار میره که بتونین مشکل مطرح شده رو حل کنین.

[box type=”info” class=”question-from-users” width=””]

سوال:

سلام. من کد زیر رو نوشتم و انتظار دارم که عنصر div، به اندازه ۲۰۰ پیکسل به سمت راست و ۳۸ پیکسل به سمت پایین حرکت کنه. اما کار نمیکنه.

نمیدونم مشکل از کجاست. میتونین کمکم کنین؟

<div></div>
div{
   width:100px;
   height:100px;
   background-color:lightblue;
   border-radius: 5px;
   translate: transform(200px, 38px);
}

به ایمیل کسانی که پاسخ درست و کامل رو در نظرات بگن ۱۰ هزارتومان در پنل کاربری آکادمی میزفا حسابشون شارژ میشه. (البته باید در آکادمی میزفا ثبت‌نام کنید تا بتونید از این امتیاز استفاده کنید.)

[/box]

نتیجه گیری

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

تبدیلاتی که تو این مقاله با هم یاد گرفتیم، عبارت بودن از:

  • scale: برای کوچک و بزرگ کردن عنصر
  • translate: برای انتقال عنصر
  • skew: برای انحراف دادن عنصر
  • rotate: برای چرخوندن عنصر

در مقاله بعد،‌ تبدیلات سه بعدی رو با هم بررسی می‌کنیم.

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

مدیر محتوا: علی اسمعیلی

فیلم آموزشی asp.net core 2

نوید معدن نژاد
یک عدد دانشجوی مهندسی مکانیک، که راه رسیدن به رویاهاش رو تو علوم کامپیوتری پیدا می‌کنه و سعی می‌کنه هیچوقت از یادگیری دست نکشه!
آموزش CSS
پایین سرفصل های CSS هست، روی منم کلیک کنی میتونی ببینی.

فیلم آموزشی asp.net core 2

2 نظر

2 پاسخ

  1. سلام کد اشتباه نوشته شده و جای translate و transform باید عوض بشه
    transform: translate(200px, 38px)

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

حداکثر حجم فایل برای آپلود: 1 مگابایت. فایل‌های مجاز برای آپلود: عکس, ویس, ویدیو, ورد یا پی دی اف, فایل متنی, زیپ. شما می‌تونید برای بهتر پرسیدن سوالتون، عکس یا ویس یا حتی فیلم در بخش نظرات میزفا آپلود کنید. برای ضبط ویس می‌تونید از خود واتس آپ استفاده کنید و بعد اینجا آپلود کنید و برای ارسال عکس هم کافی هست اسکرین شات بگیرید.

با موفقیت ثبت شد، میزفا از شما برای عضویت در خبرنامه هفتگی تشکر میکند.

عضویت در خبرنامه هفتگی برای دریافت:

  • فیلم و مقاله رایگان سئو
  • آموزش‌های UX ، GA و GTM
  • مقاله های تخصصی ASP.NET Core
  • اطلاع رسانی از محصولات
فیلم آموزشی asp.net core 2
ترک میزفا خوب نیست!
دوره سئو، رایگان شد.
فرصتی رایگان برای یادگیری
کاراکتر اشاره گر
دوره سئو، رایگان شد.
فرصتی رایگان برای یادگیری
کاراکتر اشاره گر