افکت زوم|HTML CSS

شروع موضوع توسط plus2 ‏15 نوامبر 2011 در انجمن آموزش CSS

  1. plus2

    plus2 کاربر جدید

    تاریخ عضویت:
    ‏30 سپتامبر 2011
    ارسال ها:
    78
    تشکر شده:
    0
    برای اینکه بتونید از این افکت استفاده کنید
    ابتدا 2 فایل زیر را دانلود کنید
    [attachment=321]
    بعد از دانلود فایل html را باز کنید و بر روی تصویر ا بروید میبینید که تصویر بزرگتر شده و بسمت راست کمی میچرخد
    علت آن در فایل Css است
    کد:
    -moz-transform: scale(1.1) rotate(5deg);
    scale مقدار زوم را برای کد مشخص شده تعیین میکند و rotate مقدار چرخش آن
    میدانید که باید این کد را به hover اضافه کنید همانطور که در فایل Css مشاهده میکنید
    برای اینکه تغییرات هم به آرامی صورت بگیرد هم از
    کد:
    -moz-transition:all 0.5s ease-in;
    استفاده کنید هم در کد اصلی و هم در hover آن مانند فایل Css تغییرات در اعداد در کد مشکلی ایجاد نمیکند
     

    پیوست ها:

    • plus2.css
      اندازه فایل:
      209 بایت
      نمایش ها:
      19
    • 4.html
      اندازه فایل:
      408 بایت
      نمایش ها:
      26