آموزش CSSآموزش طراحی سایت

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

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

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

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

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

خاصیت transform

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

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

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

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

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

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

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

دستور ()rotateX در CSS

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

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

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

مثال از ()rotateX
مثال از ()rotateX

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

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

دستور ()rotateY در CSS

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

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

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

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

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

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

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

دستور ()rotateZ در CSS

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

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

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

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

 

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

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

تبدیلات سه بعدی ما به مقادیر ()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 رو ۱۰ درجه بچرخونم. اما متاسفانه هیچ تغییری به وجود نمیاد.

کد های HTML من:

<span>Hello world!</span>

و کد های CSS:

span{
   transform: rotate(10deg);
}

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

ممنون.

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

نتیجه گیری

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

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

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

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

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

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

نوید معدن نژاد

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

‫6 دیدگاه ها

  1. فکر کنم این مقدار باید نوشته بشه
    display: inline-block;
    چون span نحوه نمایش inline داره

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

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

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

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

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

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

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