امروز قصد داریم یک بخشی از آموزش CSS3 رو برای شما قرار بدهیم ، در این مطلب یاد خواهید گرفت که یک متن ، تصویر و... ای را به چرخش در آورید ...
در ابتدا باید متن یا تصویری که میخواهید به چرخش در بیاید را انتخاب نمائید ، ما در این قسمت 4 عکس را مورد انتخاب قرار داده ایم :
حال وقت کد نویسی است :
در ابتدا در بخش STYLE خود یک کلاس با نام rotate ایجاد نمائید :
<style type="text/css"> .rotate:hover{ -moz-transform:rotate(360deg);-moz-transition:600ms ease-in; -ms-transform:rotate(360deg);-ms-transition:600ms ease-in; -webkit-transform:rotate(360deg);-webkit-transition:600ms ease-in; -o-transform:rotate(360deg);-o-transition:600ms ease-in; } </style>
در کد فوق در ابتدا ما کلاس rotate را به صورت hover تعریف کرده ایم ، یعنی وقتی عملی رخ دهد که اشاره ماوس روی آن قرار گیرد ، در قسمتهای بعدی لازم است چهار مقدار را در ابتدا توضیح دهیم :
- moz-transform : این دستور برای اجرا شدن در مرورگر فایرفاکس میباشد.
- ms-transform : این دستور برای اجرا شدن در مرورگر اینترنت اکسپلورر میباشد.
- webkit-transform : این دستور برای اجرا شدن در مرورگرهای webkit همانند سافاری میباشد.
- o-transform : این دستور نیز برای اجرا شدن در مرورگر opera میباشد.
این دستورات در css3 به صورت قرار دادی برای انواع مرورگرها تعریف شده اند.
دستور ratate :
دستور rotate ، درجه چرخش را مشخص میکند ، همانطور که در کد بالا مشاهده مینمائید ، ما از 360deg( یعنی 360 درجه) استفاده نموده ایم.
دستور transition :
این دستور برای مشخص کردن سرعت چرخش میباشد که بر حسب میلی ثانیه میباشد ، ما در این قسمت آن را برابر با 600 قرار داده ایم ، همچنین مقدار ease in که یکی از پارامترهای دستور transition میباشد ، ease in باعث شروع چرخش به صورت آهسته میشود.
کد اجرا و فراخوانی کلاس :
<img width="55" height="55" border="0" src="https://7learn.com/wp-content/uploads/rss2.png"class="rotate" /> <img width="55" height="55" border="0" src="https://7learn.com/wp-content/uploads/chrome2.png"class="rotate" /> <img width="55" height="55" border="0" src="https://7learn.com/wp-content/uploads/ie2.png"class="rotate" /> <img width="55" height="55" src="https://7learn.com/wp-content/uploads/firefox2.png"class="rotate" />
برای مشاهده خروجی کلیک نمائید
اگر براتون جالب بود ، نظرات خودتون رو بیان کنید...
سلام و وقت بخير خدمت شما اساتيد گرام.
سايتتون واقعا عاليه. مشابه سايت شما توي نت زياده و اين آموزش هاروو قرار داده. اما تفاوت سايت شما مثل تفاوت جنس آمريكايي با چيني ميمونه.
ضمانت داره كار و آموزشاتون. حرف نداره.
يعني چيزي نبوده كه الكي نوشته بشه و بخواد يچيزي رو فقط منتشر كرده باشه.
دست مريزاد. مخلص همه شما ها
محمدرضا عابديني
ممنون جناب عابدینی
لطف دارید شما
تیم سون لرن همواره قدردارن الطاف شما و بازدیدکنندگان عزیز بوده …
درود بر شما 😳 😳 😳
بخدا لقمان استادی بخدا قسم مادر مثل تو نزائیده
دست شما درد نکنه
من نمی تونم کد رو تو جای مناسب و با تغییرات لازم تو هدرم قرار بدم
این کد رو درون تگ head قالبت بزار :
بعد عکسی که تو هدرت میزاری کلاس rotate رو بهش اضافه کن .
سلام شما میتونید یه کاری کنید که تو هدرم نوشته ی (M)با رفتن موس بر روی اون یک بار پایین بیاد و دوباره با رفتن موس برگرده سر جاش مثل نوشته ی 7 learn توی این ادرس:
https://7learn.com/wp-content/uploads/linear.html
اگه تونستید برام جایگزینش کنید.
ادرس:WWW.moteghaleb1.rozblog.com
ادرس فایل حاوی قالب :http://www.uplod.ir/ygku0qlcv1i6/111.txt.htm
می توانید از کد زیر استفاده نمائید :
برای فراخوانیش هم می توانید از دستور زیر استفاده نمائید :
می توانید تصویر https://7learn.com/wp-content/uploads/7learn.jpg را ویرایش نمائید و حرف m را تایپ نمائید
داداش دستت درست خیلی باحالی 😳 😳 😳
من می خوام این کد رو جای هدرم بذارم ولی نمی تونم
مشکلتون چیه ؟
عالی بود دستتون درد نکنه
مرسی از راهنماییت.
سلام مهندس میلاد گرامی
دیروز یه سایت رو نگاه کردم طراجی انیمینش فوق العاده واسم جالب بود لینکشو واست میزارم ببین ازش سر در میاری یه چیزایی هم به من بگی .مرسی.
از بس زیباست خودم نشستم دارم یه چیزاییشو طراحی می کنم امیدوارم شماهم کمکم کنید.مرسی .
سلام دوست عزیز 80 درصد این سایت با استفاده از افکت های jquey ایجاد شده است ، از قبیل ، fade کردن ، و غیره
صفحات نیز با استفاده از متد animate هستند و پارامترهایی که داره ، البته به این آسونی که میگم نیست نیاز به زمان و سلیقه داره…
ان شاالله اگر وقت داشته باشیم تا چند وقت دیگر یا چند ماه دیگر شروع به آموزش jquery می نمائیم
اگه لطف کنین واسه تمام انیمیشن ها بگید که ممنون میشم
ان شاالله اگر راه حل هایی باشد ،حتما (در حال بررسی هستیم)
نوکر شما! 😉
اگر منظور شما همون filter می باشد : بله یک ترفند دیگر از css می باشد و در ie نیز کار می کند ولی به خوبی دستورهای transition نیست.
با تشکر