تخفیف ویژه
سبد خرید

چرخش تصاویر در CSS3

بخش: مقالات
دسته بندی: آموزش
زمان مطالعه: 2 دقیقه
۲۸ تیر ۱۳۹۱

امروز قصد داریم یک بخشی از آموزش 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" />

برای مشاهده خروجی کلیک نمائید

اگر براتون جالب بود ، نظرات خودتون رو بیان کنید...

چه امتیازی به این مقاله می دید؟
Tags:   CSS‏frontendHTML‏imageprogrammingui
نویسنده میلاد حیدری
میلاد حیدری
19 ساله، ساکن تهران و دانشجوی مهندسی کامپیوتر ؛طراح وب سایت ، سئو کار با سابقه کاری ، مطالعه بسیار زیاد در امر سئو و برندینگ اینترنتی و آشنایی با زبان های همچون PHP,JavaScript,html5,CSS3, Jquery ، با زبان انگلیسی آشنایی کامل دارم و شدیدا طرفدار استقلال و فرهاد مجیدی هستم.

مطالب پیشنهادی :

نظرات کاربران

محمدرضا عابديني

سلام و وقت بخير خدمت شما اساتيد گرام.

سايتتون واقعا عاليه. مشابه سايت شما توي نت زياده و اين آموزش هاروو قرار داده. اما تفاوت سايت شما مثل تفاوت جنس آمريكايي با چيني ميمونه.
ضمانت داره كار و آموزشاتون. حرف نداره.
يعني چيزي نبوده كه الكي نوشته بشه و بخواد يچيزي رو فقط منتشر كرده باشه.
دست مريزاد. مخلص همه شما ها
محمدرضا عابديني

لقمان آوند

ممنون جناب عابدینی
لطف دارید شما
تیم سون لرن همواره قدردارن الطاف شما و بازدیدکنندگان عزیز بوده …

ahmad

درود بر شما 😳 😳 😳

Avazekhoda

بخدا لقمان استادی بخدا قسم مادر مثل تو نزائیده

hadib

دست شما درد نکنه

haditgr

من نمی تونم کد رو تو جای مناسب و با تغییرات لازم تو هدرم قرار بدم

لقمان آوند

این کد رو درون تگ head قالبت بزار :

&lt;style type=&quot;text/css&quot;&gt;
.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;
}
&lt;/style&gt;

بعد عکسی که تو هدرت میزاری کلاس rotate رو بهش اضافه کن .

haditgr

سلام شما میتونید یه کاری کنید که تو هدرم نوشته ی (M)با رفتن موس بر روی اون یک بار پایین بیاد و دوباره با رفتن موس برگرده سر جاش مثل نوشته ی 7 learn توی این ادرس:

https://7learn.com/wp-content/uploads/linear.html
اگه تونستید برام جایگزینش کنید.
ادرس:WWW.moteghaleb1.rozblog.com
ادرس فایل حاوی قالب :http://www.uplod.ir/ygku0qlcv1i6/111.txt.htm

میلاد حیدری

می توانید از کد زیر استفاده نمائید :

a.logoImage {
 display:block;
 height:80px;
 background: url(https://7learn.com/wp-content/uploads/7learn.jpg) no-repeat center 0;
 -moz-transition:background 0.5s; /* Firefox 4 */
 -webkit-transition:background 0.5s; /* Safari and Chrome */
 -o-transition:background 0.5s; /* Opera */
 } 
a.logoImage:hover {
 background: url(https://7learn.com/wp-content/uploads/7learn.jpg) no-repeat center -80px;
 }

برای فراخوانیش هم می توانید از دستور زیر استفاده نمائید :

&lt;a href=&quot;https://7learn.com&quot; class=&quot;logoImage&quot;&gt;&lt;/a&gt;

می توانید تصویر https://7learn.com/wp-content/uploads/7learn.jpg را ویرایش نمائید و حرف m را تایپ نمائید

haditgr

داداش دستت درست خیلی باحالی 😳 😳 😳

haditgr

من می خوام این کد رو جای هدرم بذارم ولی نمی تونم

لقمان آوند

مشکلتون چیه ؟

amiri

عالی بود دستتون درد نکنه

عباس بهرامی کیا

مرسی از راهنماییت.

عباس بهرامی کیا

سلام مهندس میلاد گرامی

دیروز یه سایت رو نگاه کردم طراجی انیمینش فوق العاده واسم جالب بود لینکشو واست میزارم ببین ازش سر در میاری یه چیزایی هم به من بگی .مرسی.

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

میلاد حیدری

سلام دوست عزیز 80 درصد این سایت با استفاده از افکت های jquey ایجاد شده است ، از قبیل ، fade کردن ، و غیره

صفحات نیز با استفاده از متد animate هستند و پارامترهایی که داره ، البته به این آسونی که میگم نیست نیاز به زمان و سلیقه داره…

ان شاالله اگر وقت داشته باشیم تا چند وقت دیگر یا چند ماه دیگر شروع به آموزش jquery می نمائیم

fateme64

اگه لطف کنین واسه تمام انیمیشن ها بگید که ممنون میشم

میلاد حیدری

ان شاالله اگر راه حل هایی باشد ،حتما (در حال بررسی هستیم)

hosein2398

نوکر شما! 😉

میلاد حیدری

اگر منظور شما همون filter می باشد : بله یک ترفند دیگر از css می باشد و در ie نیز کار می کند ولی به خوبی دستورهای transition نیست.

با تشکر

ارسال دیدگاه
خوشحال میشیم دیدگاه و یا تجربیات خودتون رو با ما در میون بذارید :