• illustrator Curse
  • 7Learn Android Course
  • 7Learn SEO Course
  • 7Learn WP Theme Course

    حرفه ای ترین دوره آموزش طراحی قالب وردپرس



  آیا می دانید تا کنون 6246 نفر در 14 دوره آموزشی سون لرن ثبت نام کرده اند !

آموزش CSS (فصل یازدهم – جلسه اول) : آشنایی با جلوه های ویژه ی CSS3

27938 ۱۰ اسفند ۹۱

خاصیت transform  

شما میتوانید با استفاده از خاصیت transform  بر روی عناصر جلوه های ویژه ای را اعمال کنید ( در آخر خواهیم آموخت چگونه با استفاده از این خاصیت یه حالت انیمیشن به عناصر بدهیم.) این خاصیت سه مقدار دارد، و هر مقدار  برای یکی از جلوه ها به کار می رود.

قاعده کلی :

مقدار پیشفرض : none

Rotate  : برای چرخش اجزا به کار می رود.

Skew : برای کجی و انحراف عناصر به کار می رود

Scale : برای بزرگنمایی عناصر به کار می رود

در ادامه برای آشنایی با هر یک از مقادیر یک مثال میزنیم :

مقدار rotate

مثال :

کد css  :

نتیجه در مرورگر :

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

این مقدار از اعداد منفی نیز پشتیبانی می کند.

مقدار skew  

مثال :

کد css  :

نتیجه در مرورگر :

این مقدار از اعداد منفی نیز پشتیبانی می کند.

مقدار  scale

مثال :

کد css  :

عدد 1.5  به این معناس که عنصر عرض و ارتفاع عنصر 1.5   برابر افزایش یابد. (بزرگنمایی)

این مقدار از اعداد منفی نیز پشتیبانی می کند.  با این تفاوت که عنصر ما 360 درجه نیز تغییر زاویه خواهد داد.

بسیار خب،در جلسه دوم این فصل با خاصیت های transition و keyframe و طریقه ساخت یک انیمیشن آشنا خواهیم شد.

:: مطالب جدید سون لرن را از طریق ایمیل دریافت کنید :

دیدگاه ها 31 دیدگاه برای این مطلب ارسال شده است. نظردهی برای این مطلب بسته شده است .

  • ‏‏
    programer2020(۲۸ مرداد ۱۳۹۲)

    با سلام
    این کد هایی که اول با – شروع میشه چیه؟
    من حذفشون می کنم بازم کار می کنه پس چه کاربردی داره؟

    • ‏‏
      کیوان علی محمدی(۱ شهریور ۱۳۹۲)

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

  • ‏‏

    سجاد جان ممنون از آموزش های خوبت
    آقا من امتحان کردم، خاصیت scale مقادیر کمتر از 1، مثلا 0.5 هم میگیره و تصاویر رو کوچیک میکنه!

  • ‏‏

    -webkit-transform: scale(1.5);
    3
    -moz-transform: scale(1.5);
    4
    -o-transform: scale(1.5);
    الان این webkit و moz و o قبل از transform چی چیه؟؟ یکم گنگ بود.اگه میشه یکم توضیح بده دوست من … با تشکر

    • ‏‏

      moz , o که فهمیدم پیشوند موزیلا و اپراست و اونیم که عادی نوشته شده حتما مال ie . وب کیت
      مال چیه؟؟؟

      • ‏‏
        لقمان آوند(۱۳ شهریور ۱۳۹۲)

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

    • ‏‏
      سجاد دریس(۱۴ شهریور ۱۳۹۲)

      چونکه هنوز مرورگرها از css3 به طور کامل پشتیبانی نمی کنند، برای کار کردن هر کدوم از خصوصیت های css3 در هر مرورگر ابتدا باید پیشوند هر مرورگر رو قبل از خصوصیت قرار بدین.
      -webkit- برای مرورگر کروم و سافاری
      -moz- برای مرورگر موزیلا فایرفاکس
      -o- برای مرورگر اوپرا
      -ie- برای مرورگر اینترنت اکسپلورر

  • ‏‏

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

    سجاد جان من آیدی یاهوی شمارو اد کردم خوشحال میشم قبول کن
    اینم اید من alonetaha69@yahoo.com
    یک سوالی داشتم اینجا نمیشه پرسید
    اگه میشه یا شمارتونو بدین یا تو یاهو باهم صحبت کنیم
    منتظرم ➡

  • ورود/عضویت سریع با اکانت فیسبوک/جیمیل شما

    :: شما می توانید با استفاده از اکانت یاهو یا جیمیل خود به صورت کاملا امن، سریع و بدون نیاز به ورود اطلاعات عضو و وارد سایت شوید. در این صورت هیچ نیازی به ورود نام کاربری و رمز عبور خود نخواهید داشت و هویت شما از طریق ایمیلتان مورد تائید قرار می گیرد .
    برای استفاده از این روش باید در اکانت گوگل(جیمیل) و یا یاهوی خود لاگین باشید .
    عضویت/ ورود سریع با :
    در حال اتصال ...

    ورود به سایت

    ورود سریع با :
    در حال اتصال ...

    جستجو در سون لرن

    عبارت :
    7LearnTelegram