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

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

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

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

خاصیت transform

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

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

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

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

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

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

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

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

مقدار ()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 در صورت داشتن تنها یک ورودی، تغییر ابعاد رو در راستای X انجام خواهد داد.

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

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

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

<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);
}

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

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

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

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

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

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

<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);
}

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

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

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

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

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

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

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

همونطور که می‌بینیم، مقدار ()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);
}

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

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

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

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

<div>
</div>

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

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

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

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

مقدار ()matrix

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

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

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

/* ---  استفاده از چندین تبدیل  --- */
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 هست.

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

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

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

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

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

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

سوال:

<div></div>

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

نتیجه گیری

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

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

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

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

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

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