تبلیغات در اینترنت

تبلیغات در اینترنتگیفت کارت گوگل پلی
صفحه 1 از 2 12 آخرینآخرین
نمایش نتایج: از 1 به 10 از 15

موضوع: آموزش چرخیدن تصویر در CSS3

  1. Top | #1
    کاربر سایت

    تاریخ عضویت
    Nov 2011
    ورژن ویبولتین
    6.X.X
    نوشته ها
    607
    مورد پسند
    384 بار
    اطلاعات
    Windows 7/Server 2008 R2 Chrome 22.0.1215.0
    میزان امتیاز
    73

    پیش فرض آموزش چرخیدن تصویر در CSS3

    درود
    با یک آموزش ساده و جالب درخدمت شما کاربران عزیز هستیم.
    ابتدا قبل از هر چیز یک نمونه ببینید:لینک
    همان طور که در عنوان مشخص هست با استفاده از یک کد ساده به نسبت درجه تصویر مورد نظرمونُ دچار تغییر حالت بدیم.
    کد PHP:
    transform:rotate(ndeg); 
    در کد بالا منظور از n یک عدد هست ، همچنین در ادامه کد های دیگر به همین شکل خواهد بود.
    همچنین برای این که این در تمامی مروگر ها کار کند از 4 کد زیر استفاده کنید تا مشکل خاصی در نمایش به وجود نیاد.
    در IE9 :
    کد PHP:
    -ms-transform:rotate(ndeg); 
    در Opera :
    کد PHP:
    -o-transform:rotate(ndeg); 
    در Safari و Chrome :
    کد PHP:
    -webkit-transform:rotate(ndeg); 
    و در آخر در Firefox :
    کد PHP:
    -moz-transform:rotate(ndeg); 
    دوباره می گم برای اینکه مشکلی در مرورگر ها پیش نیاد حتما از تمامی کد های بالا استفاده کنید.

    با تشکر.




  2. گیفت کارت آیتونز

  3. Top | #2
    کاربر سایت

    تاریخ عضویت
    May 2010
    ورژن ویبولتین
    4.2
    سن
    22
    نوشته ها
    3,417
    مورد پسند
    8,062 بار
    نوشته های وبلاگ
    1
    اطلاعات
    Windows 8 Chrome 22.0.1229.0
    میزان امتیاز
    523

    پیش فرض

    تائید شد .

    کاربر مقابل از Mr.Ramin بابت این پست مفید تشکر کرده است:



  4. Top | #3
    کاربر مفید و فعال

    تاریخ عضویت
    Nov 2012
    ورژن ویبولتین
    3
    نوشته ها
    362
    مورد پسند
    353 بار
    اطلاعات
    Windows XP Firefox 16.0
    میزان امتیاز
    48

    پیش فرض

    ببخشید دوستان میشه یه کد کامل از این کد رو بزارید. من امتحان کردم ولی کار نکرد.


    <html>
    <head>
    <style type="text/css">
    a:link:hover{transform:rotate(2deg);}
    a{
    -webkit-transform:rotate(2deg);
    -ms-transform:rotate(2deg);
    -o-transform:rotate(2deg);
    -moz-transform:rotate(2deg);
    }
    </style>
    </head>
    <body>
    <a href="http://1pars.com"><img src="header copy.jpg"/></a>
    </body>
    </html>

  5. Top | #4
    مدیر بازنشته

    تاریخ عضویت
    Jul 2011
    ورژن ویبولتین
    4.2.2
    نوشته ها
    550
    مورد پسند
    1,539 بار
    اطلاعات
    Mac OS X 10.8.2 Safari 6.0.2
    میزان امتیاز
    92

    پیش فرض

    یک نمونه براتون اماده کردم
    روی ۳۰ درجه چرخش هست
    میتونید کم یا زیاد کنید ...


    کد HTML:
    <html>
    <head>
    <style type="text/css">
    img {-webkit-transition:all 0.5s ease-in-out;
    -moz-transition:all 0.5s ease-in-out;
    -o-transition:all 0.5s ease-in-out;
    transition:all 0.5s ease-in-out;}
    img:hover {-webkit-transform:rotate(30deg);
     -ms-transform:rotate(30deg);
     -o-transform:rotate(30deg);
     -moz-transform:rotate(30deg);
     -webkit-transition:all 0.5s ease-in-out;
    -moz-transition:all 0.5s ease-in-out;
    -o-transition:all 0.5s ease-in-out;
    transition:all 0.5s ease-in-out;}
    </style>
    </head>
    <body>
    <a href="http://1pars.com"><img src="http://www.1pars.com/templates/shaper_neo/images/styles/style1/logo.png"/></a>
    </body>
    </html>

    2 تشکر توسط:

    انجمن تخصصی آيفون
    The First And Biggest Persian Apple Forums

  6. Top | #5
    کاربر مفید و فعال

    تاریخ عضویت
    Nov 2012
    ورژن ویبولتین
    3
    نوشته ها
    362
    مورد پسند
    353 بار
    اطلاعات
    Windows XP Firefox 16.0
    میزان امتیاز
    48

    پیش فرض

    ببخشید میشه این کد رو روی متن اعمال کرد؟

  7. Top | #6
    مدیر بازنشته

    تاریخ عضویت
    Dec 2010
    ورژن ویبولتین
    -
    نوشته ها
    525
    مورد پسند
    1,021 بار
    اطلاعات
    Windows 7/Server 2008 R2 Firefox 16.0
    میزان امتیاز
    79

    پیش فرض

    نقل قول نوشته اصلی توسط #>MOHAMMAD<# نمایش پست ها
    ببخشید میشه این کد رو روی متن اعمال کرد؟
    بله
    Retired Mod <

  8. Top | #7
    کاربر مفید و فعال

    تاریخ عضویت
    Nov 2012
    ورژن ویبولتین
    3
    نوشته ها
    362
    مورد پسند
    353 بار
    اطلاعات
    Windows XP Firefox 16.0
    میزان امتیاز
    48

    پیش فرض

    خب اگه میشه بگید دیگه. چه کدهایی باید جایگذین کدهای فعلی بشن؟

  9. Top | #8
    مدیر بازنشته

    تاریخ عضویت
    Dec 2010
    ورژن ویبولتین
    -
    نوشته ها
    525
    مورد پسند
    1,021 بار
    اطلاعات
    Windows 7/Server 2008 R2 Firefox 16.0
    میزان امتیاز
    79

    پیش فرض

    کد PHP:
    <!DOCTYPE html>
    <
    html>
    <
    head>
    <
    style
    .
    vbiran
    {
    width:10pxheight:10px;
    transform:rotate(7deg);
    -
    ms-transform:rotate(7deg);
    -
    moz-transform:rotate(7deg); 
    -
    webkit-transform:rotate(7deg); 
    -
    o-transform:rotate(7deg);
    }
    </
    style>
    </
    head>
    <
    body>
    <
    div class="vbiran">test</div>
    </
    body>
    </
    html

    کاربر مقابل از jcs.w بابت این پست مفید تشکر کرده است:

    Retired Mod <

  10. Top | #9
    کاربر مفید و فعال

    تاریخ عضویت
    Nov 2012
    ورژن ویبولتین
    3
    نوشته ها
    362
    مورد پسند
    353 بار
    اطلاعات
    Windows XP Firefox 16.0
    میزان امتیاز
    48

    پیش فرض

    تشکرات فراوان ولی کار نکرد.

  11. Top | #10
    کاربر اخراجی

    تاریخ عضویت
    Sep 2012
    ورژن ویبولتین
    فقـــــط گرافیک
    نوشته ها
    981
    مورد پسند
    893 بار
    نوشته های وبلاگ
    3
    اطلاعات
    Windows 7/Server 2008 R2 Chrome 23.0.1271.64
    میزان امتیاز
    0

    پیش فرض

    نقل قول نوشته اصلی توسط software نمایش پست ها
    درود
    با یک آموزش ساده و جالب درخدمت شما کاربران عزیز هستیم.
    ابتدا قبل از هر چیز یک نمونه ببینید:لینک
    همان طور که در عنوان مشخص هست با استفاده از یک کد ساده به نسبت درجه تصویر مورد نظرمونُ دچار تغییر حالت بدیم.
    کد PHP:
    transform:rotate(ndeg); 
    در کد بالا منظور از n یک عدد هست ، همچنین در ادامه کد های دیگر به همین شکل خواهد بود.
    همچنین برای این که این در تمامی مروگر ها کار کند از 4 کد زیر استفاده کنید تا مشکل خاصی در نمایش به وجود نیاد.
    در IE9 :
    کد PHP:
    -ms-transform:rotate(ndeg); 
    در Opera :
    کد PHP:
    -o-transform:rotate(ndeg); 
    در Safari و Chrome :
    کد PHP:
    -webkit-transform:rotate(ndeg); 
    و در آخر در Firefox :
    کد PHP:
    -moz-transform:rotate(ndeg); 
    دوباره می گم برای اینکه مشکلی در مرورگر ها پیش نیاد حتما از تمامی کد های بالا استفاده کنید.

    با تشکر.
    لینک خرابه ( دمو)

صفحه 1 از 2 12 آخرینآخرین

اطلاعات موضوع

کاربرانی که در حال مشاهده این موضوع هستند

در حال حاضر 1 کاربر در حال مشاهده این موضوع است. (0 کاربران و 1 مهمان ها)

موضوعات مشابه

  1. پاسخ: 13
    آخرين نوشته: 2014/06/17, 10:58 AM
  2. آموزش محو کردن [Blur] متن با CSS3
    توسط Mr.Ramin در انجمن آموزش CSS بصورت ساده و حرفه ای
    پاسخ: 6
    آخرين نوشته: 2012/09/09, 06:47 PM
  3. [CSS3] آموزش ساخت باکس زیبا به شکل روبان
    توسط Mr.Ramin در انجمن آموزش CSS بصورت ساده و حرفه ای
    پاسخ: 0
    آخرين نوشته: 2012/08/07, 10:29 PM
  4. [آموزش] پس زمینه گرادینت در CSS3
    توسط Mohsen Neo در انجمن آموزش CSS بصورت ساده و حرفه ای
    پاسخ: 1
    آخرين نوشته: 2012/08/07, 05:26 PM
  5. [آموزش] سایه ی جعبه در CSS3
    توسط Mohsen Neo در انجمن آموزش CSS بصورت ساده و حرفه ای
    پاسخ: 0
    آخرين نوشته: 2012/07/02, 01:08 AM

کلمات کلیدی این موضوع

علاقه مندی ها (Bookmarks)

علاقه مندی ها (Bookmarks)

مجوز های ارسال و ویرایش

  • شما نمیتوانید موضوع جدیدی ارسال کنید
  • شما امکان ارسال پاسخ را ندارید
  • شما نمیتوانید فایل پیوست کنید.
  • شما نمیتوانید پست های خود را ویرایش کنید
  •