جستجو برای:
  • خانه
  • طراحی سایت
  • خدمات ما
    • سامانه یادگیری الکترونیکی – سایا (LMS)
    • سامانه الکترونیکی مدیریت آموزش (ساما) (EMS)
    • پشتیبانی نرم افزار
    • پشتیبانی سخت افزار
    • پشتیبانی شبکه
    • پشتیبانی ماشین های اداری
  • نمونه کارها
  • قالب و افزونه
  • دسته بندی مطالب
    • آموزش مجازی
    • اخبار سینما
    • افزونه وردپرس
    • آموزش افزونه وردپرس
    • بازی
    • دوره های رایگان
    • سریال
    • فناوری
    • فیلم
      • اکشن
      • تاریخی
      • ترسناک
      • کمدی
      • هیجان انگیز
      • ورزشی
    • قالب وردپرس
      • قالب خبری و وبلاگ
      • قالب شرکتی
      • قالب نمونه کار
      • قالب های چند منظوره
    • مقالات
      • بازایابی دیجیتال
      • برنامه نویسی
      • تولید و بازاریابی محتوا
      • طراحی و گرافیک
  • تماس با ما
  • DMCA
  • پشتیبان سایت
 
  • 02144824488
  • info@myhamyar.com
  • بلاگ
  • تماس با ما
  • درباره ما
همیارِمَن  | آموزش برنامه نویسی و طراحی سایت | طراحی گرافیک
دسترسی سریع
  • پشتیبان سایت
0

ورود و ثبت نام

  • خانه
  • طراحی سایت
  • خدمات ما
    • سامانه یادگیری الکترونیکی – سایا (LMS)
    • سامانه الکترونیکی مدیریت آموزش (ساما) (EMS)
    • پشتیبانی نرم افزار
    • پشتیبانی سخت افزار
    • پشتیبانی شبکه
    • پشتیبانی ماشین های اداری
  • نمونه کارها
  • قالب و افزونه
  • دسته بندی مطالب
    • آموزش مجازی
    • اخبار سینما
    • افزونه وردپرس
    • آموزش افزونه وردپرس
    • بازی
    • دوره های رایگان
    • سریال
    • فناوری
    • فیلم
      • اکشن
      • تاریخی
      • ترسناک
      • کمدی
      • هیجان انگیز
      • ورزشی
    • قالب وردپرس
      • قالب خبری و وبلاگ
      • قالب شرکتی
      • قالب نمونه کار
      • قالب های چند منظوره
    • مقالات
      • بازایابی دیجیتال
      • برنامه نویسی
      • تولید و بازاریابی محتوا
      • طراحی و گرافیک
  • تماس با ما
  • DMCA
  • پشتیبان سایت

بلاگ

همیارِمَن | آموزش برنامه نویسی و طراحی سایت | طراحی گرافیکبلاگدوره های رایگانکار با ویژگی Transforms در CSS3

کار با ویژگی Transforms در CSS3

13 آبان 1400
ارسال شده توسط همیار من
دوره های رایگان
248 بازدید
آموزش صفحه بندی یا Pagination در CSS

کار با ویژگی Transforms در CSS3

ویژگی تِرنسفرم یا Transform یکی دیگر از ویژگی های زبان CSS می باشد که در نسخه ۳ این زبان اضافه شده است و با استفاده از آن میتوان عناصر را در یک صفحه وب تبدیل کرد. مثلا با استفاده از این ویژگی میتوانیم عناصر را در یک صفحه وب بچرخانیم ( Rotate ) یا مقیاس پذیری ( Scale ) و یا مثلا میتونیم یک عنصر را بصورت کج شده به نمایش درآوریم. این ویژگی تعدادی مقدار / تابع / حالت داره که ما با استفاده از آنها میتوانیم عناصرمون رو بصورت ۲ بعدی و یا ۳ بعدی به نمایش درآوریم.

توابع ۲ بعدی (۲D) این ویژگی به شرح زیر می باشند :

  • Matrix(n,n,n,n,n,n)
  • Translate(x,y)
  • TranslateX(x)
  • TranslateY(y)
  • Scale(x,y)
  • ScaleX(x)
  • ScaleX(Y)
  • Rotate(angle)
  • Skew(x-angle,y-angle)
  • SkewX(angle)
  • SkewY(angle)

توابع ۳ بعدی ( ۳D ) این ویژگی به شرح زیر می باشند :

  • Matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n)
  • Translate3d(x,y,z)
  • Scale3d(x,y,z)
  • ScaleZ(z)
  • Rotate3d(x,y,z,angle)
  • RotateX(angle)
  • RotateY(angle)
  • RotateZ(angle)

نحوه استفاده

شکل کلی نحوه استفاده از ویژگی Transform در CSS3 :

1
transform: none|transform-functions;

که بجای transform-functions باید از مقادیر موجود در جدول زیر استفاده نمایید.

جدول مقادیر ویژگی Transform بهمراه توضیحات و مثال

نام مقدار توضیح
none هیچگونه عملی / تبدیلی انجام نخواهد گرفت.
Matrix(n,n,n,n,n,n) استفاده از ماتریکس ۶ مقداری برای تبدیل ۲بعدی
Translate(x,y) برای جابه جایی بصورت ۲بعدی
TranslateX(x) جابه جایی در محور X ها
TranslateY(y) جابه جایی در محور Y ها
Scale(x,y) مقیاس پذیری بصورت ۲بعدی
(بزرگ و کوچک کردن عناصر)
ScaleX(x) مقایس پذیری فقط در محور X ها
ScaleY(y) مقیاس پذیری فقط در محور Y ها
Rotate(angle) برای چرخش دادن یک عنصر
Skew(x-angle,y-angle) کج / مورب کردن عناصر در محور X و Y
SkewX(angle) کج / مورب کردن عنصر فقط در محور X ها
SkewY(angle) کج / مورب کردن عنصر فقط در محور Y ها
Matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n) ماتریکس ۱۶مقداری (۴*۴) ۳بعدی
Translate3d(x,y,z) جابه جایی عنصر در محور X,Y,Z بصورت ۳بعدی
Scale3d(x,y,z) مقایس پذیری عنصر در محور X,Y,Z بصورت ۳بعدی
ScaleZ(z) مقایس پذیری فقط در محور Z ها
Rotate3d(x,y,z,angle) یک چرخش ۳بعدی را در محورهای X,Y,Z ایجاد میکند
RotateX(angle) چرخش فقط در محور X ها
RotateY(angle) چرخش فقط در محور Y ها
RotateZ(angle) چرخش فقط در محور Z ها

پشتیبانی مرورگرها از transform های ۲بعدی و ۳ بعدی

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

نام مرورگر Chrome Firefox Opera Safari IE
Transform (2D) ۳۶٫۰ ۱۶٫۰ ۲۳٫۰ ۹٫۰ ۱۰٫۰
Transform (2D)  ۴٫۰ | -webkit- ۳٫۵ | -moz- ۱۵ | -webkit-
۱۰٫۵ | -o-
۳٫۲ | -webkit- ۹ | -ms-
نام مرورگر Chrome Firefox Opera Safari IE
Transform (3D) ۳۶٫۰ ۱۰٫۰ ۲۳٫۰ ۹٫۰ ۱۲٫۰
Transform (3D) ۱۲٫۰ | -webkit- ۱۰٫۰ ۱۵٫۰ | -webkit- ۴٫۰ | -webkit- ۱۲٫۰

بیشتر بخوانیم:

  • آموزش کار با عناصر Block و Inline در CSS
  • راهنمای کامل ترازبندی متن ها در CSS
  • بررسی بازی Marvel Avengers
  • نحوه کار با انیمیشن ها یا Animations در CSS3
  • 7 دلیل مهم در اهمیت تولید محتوا در کسب و کار
اشتراک گذاری:
برچسب ها: CSS3Transformsآموزشآموزش CSSآموزش css pdfآموزش css پروژه محورآموزش css پیشرفتهآموزش css حرفه ایآموزش css و htmlآموزش css3آموزش css3 pdfآموزش css3 پیشرفتهآموزش css3 رایگانکار با ویژگی Transforms در CSS3
در تلگرام
کانال ما را دنبال کنید!
در اینستاگرام
ما را دنبال کنید!

مطالب زیر را حتما مطالعه کنید

لوگو ادمین سایت

آموزش انیمیشن‌سازی با CSS

در این قسمت از آموزش انیمشن‌سازی در CSS قصد داریم به طور کلی به آموزش...
همیارمن

نحوه اضافه کردن کد PHP در وردپرس

اگر به دنبال اضافه کردن کد php در وردپرس به صفحات در وردپرس هستید به...

دوره رایگان طراحی فروشگاه اینترنتی!

در حال آپدیت... امروزه شاهد سایت های فروشگاهی بسیاری هستیم. افراد بسیاری وجود دارند که...

آموزش ایجاد لیست کشویی وابسته به هم در HTML

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

ساده و بدون هزینه ترفند های عکاسی حرفه ای با موبایل را یاد بگیرید

یکی از وسایلی که امروزه تقریبا با همه ما همراه شده است و ساعت‌ها آن...
لوگو ادمین سایت

DOM چیست و چه کاربردی دارد؟

DOM عبارتی است که بیشتر آنرا در زبان جاوا اسکریپت می‌شنویم. در این مقاله در...

دیدگاهتان را بنویسید لغو پاسخ

جستجو در همیارمَن
جستجو برای:
  • آموزش مجازی
  • اخبار سینما
  • افزونه وردپرس
    • آموزش افزونه وردپرس
  • بازی
  • پیشنهادی
  • دسته‌بندی نشده
  • دوره های رایگان
  • سریال
  • فناوری
  • فیلم
    • اکشن
    • تاریخی
    • ترسناک
    • جنایی
    • کمدی
    • مستند
    • معمایی
    • هیجان انگیز
    • ورزشی
  • قالب HTML
  • قالب وردپرس
    • قالب خبری و وبلاگ
    • قالب شرکتی
    • قالب نمونه کار
    • قالب های چند منظوره
  • مقالات
    • بازایابی دیجیتال
    • برنامه نویسی
    • تولید و بازاریابی محتوا
    • طراحی و گرافیک
آخرین مطالب سایت
  • آموزش انیمیشن‌سازی با CSS
  • بهترین فیلم های اسلشر تاریخ سینما
  • نقد فیلم Cure – یک فیلم هیپنوتیزم کننده
  • نقد فیلم یتیم Orphan: First Kill
  • کسب درآمد از آموزش آنلاین چگونه است؟
برچسب‌ها
CSS HTML آموزش آموزش CSS آموزش css3 آموزش css3 pdf آموزش css3 رایگان آموزش css3 پیشرفته آموزش css pdf آموزش css حرفه ای آموزش css و html آموزش css پروژه محور آموزش css پیشرفته آموزش افزونه وردپرس آموزش تولید محتوا آموزش رایگان html همیارمن آموزش رایگان زبان html آموزش وب سایت افزونه وردپرس بازاریابی بازاریابی دیجیتال بازی بررسی بررسی بازی تولید محتوا دانلود افزونه وردپرس دانلود قالب وردپرس دوره دوره رایگان دیجیتال مارکتینگ سایت فناوری فیلم قالب قالب سایت قالب وب سایت قالب وردپرس نقد نقد بازی نقد فیلم نقد و بررسی نقد و بررسی بازی نقد و بررسی فیلم وردپرس ووکامرس

ورود

رمز عبور را فراموش کرده اید؟

هنوز عضو نشده اید؟ عضویت در سایت