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

تو مقاله قبل، تبدیلات دو بعدی رو با هم بررسی کردیم، و دیدیم که می‌تونیم تبدیلاتی همچون انتقال، دوران، انحراف و تغییر ابعاد رو روی اون ها انجام بدیم.

تبدیلات به اینجا ختم نمیشه، و ما تو این مقاله از آموزش طراحی وب سایت ، تبدیلات سه بعدی رو با هم یاد می‌گیریم 🙂

یاد می‌گیریم که تبدیلات سه بعدی چی هستن و تاثیر اون ها بر عناصر ما به چه صورته؟

همچنین پشتیبانی مرورگر ها بر هر کدوم از اون ها هم بررسی خواهیم کرد.

خاصیت transform

همانند تغییرات دو بعدی، تغییرات سه بعدی رو هم با کمک خاصیت transform انجام می‌دیم.

توسط این خاصیت، می‌تونیم:

• عناصر رو در راستای محور x دوران بدیم.
• عناصر رو در راستای محور y‌ دوران بدیم.
• و عناصر رو در راستای محور z دوران بدیم.

از تبدیلات سه بعدی،‌ عموما تو انیمیشن های CSS استفاده می‌شه. چرا که تو حالت عادی، این تبدیلات زیاد به چشم نمیان.

به همین منظور، مثال های این مقاله رو با کمک انیمیشن ها پیش می‌بریم. اگه قسمتی از کد ها رو درک نکردین، نگران نباشین.

دوران حول محور x

برای دوران حول محور xها، کافیه از مقدار ()rotateX استفاده کنیم.

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

<div class="normal">
    پایگاه دانش میزفا
</div>
        
<div class="rotate">
    پایگاه دانش میزفا
</div>

/* --- div استایل دهی به عناصر --- */
div{
   width:200px;
   height:100px;
   border: 5px solid #5f5f5f;
   background-color:#4caf50;
   margin: 40px;
   color:white;
   text-align: center;
   font-size: 1.3em;
   display: inline-block;
}
/* ---  مشخص کردن عنصر حاوی انیمیشن --- */
div.rotate{
   animation: rotate 2s linear infinite;
}
/* --- تعریف ویژگی های انیمیشن --- */
@keyframes rotate{
   from{
      transform: rotateX(0);
   }
   to{
      transform: rotateX(360deg);
   }
}

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

دوران حول محور y

این مقدار، که به صورت ()rotateY نوشته می‌شه، وظیفه دوران عنصر حول محور y رو بر عهده داره:

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

<div class="normal">
پایگاه دانش میزفا 
</div>

<div class="rotate">
پایگاه دانش میزفا 
</div>

/* --- div استایل دهی به عناصر --- */
div{
   width:200px;
   height:100px;
   border: 5px solid #5f5f5f;
   background-color:#4caf50;
   margin: 40px;
   color:white;
   text-align: center;
   font-size: 1.3em;
   display: inline-block;
}
/* --- مشخص کردن عنصر حاوی انیمیشن --- */
div.rotate{
   animation: rotate 2s linear infinite;
}
/* --- تعریف ویژگی های انیمیشن --- */
@keyframes rotate{
   from{
      transform: rotateY(0);
   }
   to{
      transform: rotateY(360deg);
   }
}

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

دوران در راستای محور z

وظیفه مقدار ()rotateZ، دوران عنصر حول محور z خواهد بود.

در واقع این مقدار، هیچ تفاوتی با مقدار ()rotate که تو تبدیلات دو بعدی یاد گرفتیم، نداره!

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

<div class="normal">
پایگاه دانش میزفا 
</div>

<div class="rotate">
پایگاه دانش میزفا 
</div>

/* --- div استایل دهی به عناصر --- */
div{
   width:200px;
   height:100px;
   border: 5px solid #5f5f5f;
   background-color:#4caf50;
   margin: 40px;
   color:white;
   text-align: center;
   font-size: 1.3em;
   display: inline-block;
}
/* --- مشخص کردن عنصر حاوی انیمیشن --- */
div.rotate{
   animation: rotate 2s linear infinite;
}
/* --- تعریف ویژگی های انیمیشن --- */
@keyframes rotate{
   from{
      transform: rotateZ(0);
   }
   to{
      transform: rotateZ(360deg);
   }
}

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

اگه جایی از مباحث رو متوجه نشدین، حتما تو قسمت نظرات پایگاه دانش میزفا بپرسین. من و دیگر اعضای تیم میزفا همراهتون هستیم 🙂

تبدیلات سه بعدی دیگر

تبدیلات سه بعدی ما به مقادیر ()rotate ختم نمی‌شه، و ما می‌تونیم تمامی تبدیلاتی که تو حالت دو بعدی داشتیم، به حالت سه بعدی تعمیم بدیم.

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

توسط مقدار ()translate می‌تونیم عناصرمون رو در راستای محور های مختلف انتقال بدیم.

translate( x , y , z );

این مقدار به سه شکل مستقل دیگه می‌تونه نوشته بشه:

• ()translateX: برای انتقال عنصر در راستای محور x
• ()translateY: برای انتقال عنصر در راستای محور y
• ()translateZ: برای انتقال عنصر در راستای محور z

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

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

توسط مقدار ()scale می‌تونیم عناصرمون رو در جهات طولی، عرضی و ارتفاعی اندازه بدیم.

scale( x , y , z );

این مقدار به سه شکل مستقل دیگه می‌تونه نوشته بشه:

• ()scaleX: برای اندازه دادن عنصر در جهت طول
• ()scaleY: برای اندازه دادن عنصر در جهت ارتفاع
• ()scaleZ: برای اندازه دادن عنصر در جهت عرض (به سمت بیرون از صفحه)

مقادیر بالا، با قبول مقادیر بزرگ از یک، عنصر رو بزرگ و با قبول مقادیر بین صفر و یک، عنصر رو کوچیک می‌کنن.

انحراف دادن به عنصر

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

skew( x , y , z );

این مقدار به سه شکل مستقل دیگه می‌تونه نوشته بشه:

• ()skewX: برای انحراف دادن به عنصر در جهت محور x
• ()skewY: برای انحراف دادن به عنصر در جهت محور y
• ()skewZ: برای انحراف دادن به عنصر در جهت محور z (به سمت بیرون از صفحه)

مقادیر بالا، می‌تونن زاویه های مختلف رو به عنوان ورودی خودشون و بر حسب واحد deg قبول کنن.

نکته خیلی مهم: عناصری که دارای نحوه نمایش inline هستن نمیتونن تحت تبدیل واقع بشن. برای این منظور باید نحوه نمایش اون ها رو به block یا inline-block تغییر بدیم.

در مورد نحوه نمایش می‌تونین تو مقاله display در CSS میزفا بیشتر مطالعه کنین.

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

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

• Firefox: از نسخه ۱۲ به بعد پشتیبانی می‌شن.
• chrome: از نسخه ۱۰ به بعد
• safari: از نسخه ۴ به بعد
• IE: از نسخه ۱۰ به بعد
• opera: فاقد پشتیبانی

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

استک اور فلو، یک وب سایت پرسش و پاسخ در مورد مشکلات برنامه نویسیه. سوال زیر، یکی از سوالات ذکر شده در این وب سایته.

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

سوال:

<span>Hello world!</span>

span{
   transform: rotate(10deg);
}

کسی می‌تونه بهم بگه که دقیقا چی رو اشتباه زدم؟

ممنون.

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

نتیجه گیری

خب، به پایان فصل تبدیلات در آموزش CSS می‌رسیم.

تو این مقاله، یا مقادیر و دستورات مختلفی آشنا شدیم که می‌تونن عناصر ما رو به صورت سه بعدی استایل بدن. همچنین تاثیر تبدیلات سه بعدی رو تو انیمیشن های CSS مشاهده کردیم 🙂

خاصیت های مورد بررسی عبارت بودن از:

• خاصیت ()rotate برای دوران حول سه محور
• خاصیت ()translate برای انتقال در طول سه محور
• خاصیت ()skew برای انحراف دادن در طول سه محور
• خاصیت ()scale برای تغییر ابعاد در راستای سه محور

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

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