آموزش های حرفه ای
مای دیزاین به عنوان یکی از تولید کنندگان محتوای آموزشی در زمینه طراحی وب و گرافیک به صورت تصویری، با کیفیت و اختصاصی در خدمت شما کاربران عزیز می باشد!
نرم افزار آندروید
طراحی و ساخت نرم افزار آندروید خدمت جدیدی است که در مای دیزاین ارائه میشود. داشتن نرم افزار برای گوشی های هوشمند امری جدید و هیجان انگیز می باشد!
طراحی وب و گرافیک
یکی از خدمات ما طراحی سایت های ایستا و پویا با جدید ترین متد های روز دنیاست. ساخت قالب هایی سبک و در عین حال زیبا، با استفاده از وردپرس، تخصص ماست!
چرخیدن المنهای صفحه به کمک CSS

چرخیدن المنهای صفحه به کمک CSS
سلام. امروز با یه آموزش دیگه از CSS اومدم. میخوام کدی رو براتون معرفی کنم که با کمک اون میتونید المنهای داخل صفحه وبسایتتون رو بچرخونید.
فرض کنیم در صفحه تصویری داریم با کلاس mydesign که میخواهیم بچرخانیم. برای این کار باید کد زیر را به کلاس mydesign:hover اضافه کنید:

.mydesign:hover {
	-webkit-transition : rotate(-4deg);
	-moz-transform : rotate(-4deg);
	-o-transition : rotate(-4deg);
}

برای نرم کردن حرکت باید به آن زمان بدهیم. برای این کار کد زیر را به کلاس mydesign اضافه میکنیم:

-webkit-transition : all 0.5s ease-in-out;
-moz-transition : all 0.5s ease-in-out;
-o-transition : all 0.5s ease-in-out;

که در پایان کدی شبیه به این خواهیم داشت:

.mydesign {
	-webkit-transition : all 0.5s ease-in-out;
	-moz-transition : all 0.5s ease-in-out;
	-o-transition : all 0.5s ease-in-out;
}
.mydesign:hover {
	-webkit-transition : rotate(-4deg);
	-moz-transform : rotate(-4deg);
	-o-transition : rotate(-4deg);
}

امیدوارم به کارتون بیاد.

5 پاسخ به “چرخیدن المنهای صفحه به کمک CSS”

  1. علی می‌گه:

    سلام .خداییش سایتتون عالیه مخصوصا این قسمت آموزش سی اس اس که دیگه بی نظیره.امیدوارم که تداوم داشته باشه.وباز هم از این آموزشهای عالی بذاررین.براتون آرزوی موفقیت میکنم.یاحق

  2. Knacky می‌گه:

    خیلی خوب بود ممنون چیزای بیشتری درباره وردپرس قرار بدید.
    میشه بگید از چه فونتی استفاده میکنید؟

  3. مهدی می‌گه:

    با قابلیت ترنسفورم نمیشد این کارو کرد؟

پاسخ دهید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

آخرین محصولات فروشگاه
برخی مطالب تصادفی مای دیزاین
مجموعه عظیم آیکون های کاربردی (سری پنجم)
طرح لایه باز محصولات اپل
رفع اشکالات قالب و نسخه نهایی
طرح لایه باز حباب های گفتگو
طرح لایه باز ساعت دیجیتال
آموزش دادن افکت بسیار زیبا به عکس در فتوشاپ