payam-nn 14 اشتراک گذاری ارسال شده در 7 اردیبهشت، ۱۳۹۲ امروز قصد داریم یک بخشی از آموزش CSS3 رو برای شما قرار بدهیم ، در این مطلب یاد خواهید گرفت که یک متن ، تصویر و... ای را به چرخش در آورید ... در ابتدا باید متن یا تصویری که می خواهید به چرخش در بیاید را انتخاب نمائید ، ما در این قسمت 4 عکس را مورد انتخاب قرار داده ایم : برای مشاهده این محتوا لطفاً ثبت نام کنید یا وارد شوید. ورود یا ثبت نام برای مشاهده این محتوا لطفاً ثبت نام کنید یا وارد شوید. ورود یا ثبت نام برای مشاهده این محتوا لطفاً ثبت نام کنید یا وارد شوید. ورود یا ثبت نام برای مشاهده این محتوا لطفاً ثبت نام کنید یا وارد شوید. ورود یا ثبت نام حال وقت کد نویسی است : در ابتدا در بخش STYLE خود یک کلاس با نام rotate ایجاد نمائید : [TABLE] [TR] [TD=class: number]1[/TD] [TD=class: content] [/TR] [/TABLE] [TABLE] [TR] [TD=class: number]2[/TD] [TD=class: content][/TD] [/TR] [/TABLE] [TABLE] [TR] [TD=class: number]3[/TD] [TD=class: content].rotate:hover{[/TD] [/TR] [/TABLE] [TABLE] [TR] [TD=class: number]4[/TD] [TD=class: content]-moz-transform:rotate(360deg);-moz-transition:600ms ease-in;[/TD] [/TR] [/TABLE] [TABLE] [TR] [TD=class: number]5[/TD] [TD=class: content]-ms-transform:rotate(360deg);-ms-transition:600ms ease-in;[/TD] [/TR] [/TABLE] [TABLE] [TR] [TD=class: number]6[/TD] [TD=class: content]-webkit-transform:rotate(360deg);-webkit-transition:600ms ease-in;[/TD] [/TR] [/TABLE] [TABLE] [TR] [TD=class: number]7[/TD] [TD=class: content]-o-transform:rotate(360deg);-o-transition:600ms ease-in;[/TD] [/TR] [/TABLE] [TABLE] [TR] [TD=class: number]8[/TD] [TD=class: content]}[/TD] [/TR] [/TABLE] [TABLE] [TR] [TD=class: number]9[/TD] [TD=class: content][/TD] [/TR] [/TABLE] در کد فوق در ابتدا ما کلاس rotate را به صورت hover تعریف کرده ایم ، یعنی وقتی عملی رخ دهد که اشاره ماوس روی آن قرار گیرد ، در قسمت های بعدی لازم است چهار مقدار را در ابتدا توضیح دهیم : moz-transform : این دستور برای اجرا شدن در مرورگر فایرفاکس می باشد. ms-transform : این دستور برای اجرا شدن در مرورگر اینترنت اکسپلورر می باشد. webkit-transform : این دستور برای اجرا شدن در مرورگرهای webkit همانند سافاری می باشد. o-transform : این دستور نیز برای اجرا شدن در مرورگر opera می باشد. نکته : این دستورات در css3 به صورت قرار دادی برای انواع مرورگرها تعریف شده اند. دستور ratate : دستور rotate ، درجه چرخش را مشخص می کند ، همانطور که در کد بالا مشاهده می نمائید ، ما از 360deg( یعنی 360 درجه) استفاده نموده ایم. دستور transition : این دستور برای مشخص کردن سرعت چرخش می باشد که بر حسب میلی ثانیه می باشد ، ما در این قسمت آن را برابر با 600 قرار داده ایم ، همچنین مقدار ease in که یکی از پارامترهای دستور transition می باشد ، ease in باعث شروع چرخش به صورت آهسته می شود. کد اجرا و فراخوانی کلاس : [TABLE] [TR] [TD=class: number]1[/TD] [TD=class: content][/TD] [/TR] [/TABLE] [TABLE] [TR] [TD=class: number]2[/TD] [TD=class: content][/TD] [/TR] [/TABLE] [TABLE] [TR] [TD=class: number]3[/TD] [TD=class: content][/TD] [/TR] [/TABLE] [TABLE] [TR] [TD=class: number]4[/TD] [TD=class: content][/TD] [/TR] [/TABLE] منبع : برای مشاهده این محتوا لطفاً ثبت نام کنید یا وارد شوید. ورود یا ثبت نام 1 نقل قول لینک به دیدگاه
ارسال های توصیه شده
به گفتگو بپیوندید
هم اکنون می توانید مطلب خود را ارسال نمایید و بعداً ثبت نام کنید. اگر حساب کاربری دارید، برای ارسال با حساب کاربری خود اکنون وارد شوید .