چرخش تصاویر در 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" />

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

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

نویسنده

میلاد حیدری

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 نیست.

با تشکر

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

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

ارسال دیدگاه

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