کدفوق العاده چرخش تصاویر به همراه دمو ( اختصاصی)

شروع موضوع توسط mmilada ‏17 فوریه 2012 در انجمن ديگر

  1. mmilada

    mmilada کاربر جدید

    تاریخ عضویت:
    ‏19 دسامبر 2011
    ارسال ها:
    103
    تشکر شده:
    0
    دمو
    با رفتن موس روی عکس عکس چرخش پیدا میکنه.درضمن شما میتونید مقدار چرخش رو هم تغییر بدین و 360 درجه یا 180 درجه یا هر درجه ای بذارین
    کد:
    کد:
     <style>
    
    p#socialicons img{ /* 1st set of icons. Rotate them 360deg onmouseover and out */
    -moz-transition: all 0.8s ease-in-out;
    -webkit-transition: all 0.8s ease-in-out;
    -o-transition: all 0.8s ease-in-out;
    -ms-transition: all 0.8s ease-in-out;
    transition: all 0.8s ease-in-out;
    }
    
    p#socialicons img:hover{
    -moz-transform: rotate(2deg);
    -webkit-transform: rotate(2deg);
    -o-transform: rotate(2deg);
    -ms-transform: rotate(2deg);
    transform: rotate(2deg);
    }
    
    p#socialicons2 img{ /* 2nd set of icons. Rotate them 60deg onmouseover and out */
    -moz-transition: all 0.2s ease-in-out;
    -webkit-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    -ms-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
    }
    
    p#socialicons2 img:hover{
    -moz-transform: rotate(8deg);
    -webkit-transform: rotate(8deg);
    -o-transform: rotate(8deg);
    -ms-transform: rotate(8deg);
    transform: rotate(8deg);
    }
    
    p#socialicons3 img{ /* 3rd set of icons. Rotate them -360deg onmouseover ONLY. Note where the "transition prop is added */
    }
    
    p#socialicons3 img:hover{
    -moz-transition: all 0.5s ease-in-out;
    -webkit-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    -ms-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
    -moz-transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    transform: rotate(360deg);
    }
    
    </style>
    
    
    <p id="socialicons2">
    <img border="0" src="http://www.google.com/intl/en_com/images/srpr/logo3w.png" /></a>
    </p>