» چرخش تصاویر به کمک css3

اخبار سایت : پلن تبلیغاتی EG با نمایش تبلیغات متنی شما به همراه لوگو گوگل پلاس شما علاوه بر افزایش رنک گوگل سبب افزایش محبوبیت شما در گوگل می شود - تبلیغات در تک طرح
تبلیغات شما
تبلیغات شما در این مکان, ماهانه 10.000 تومان
YourSite.Com
تبلیغات شما
تبلیغات شما در این مکان, ماهانه 10.000 تومان
YourSite.Com
سرورها
سرورها، فروش فضای وب و دامنه و اعطای نمایندگی فروش
تبلیغات شما
تبلیغات شما در این مکان, ماهانه 10.000 تومان
YourSite.Com
تبلیغات شما
تبلیغات شما در این مکان, ماهانه 10.000 تومان
YourSite.Com
تبلیغات شما
تبلیغات شما در این مکان, ماهانه 10.000 تومان
YourSite.Com
کمپ خبری
اخبار ورزشی ، حوادث ، جهان سیاست ، دنیای فرهنگ و هنر
News.MyCamp.Ir
طراحی وب سایت
طراحی گرافیک سایت
AzinWeb.Com
تبلیغات شما
تبلیغات شما در این مکان, ماهانه 10.000 تومان
YourSite.Com
فال حافظ
نیت کنید و با اشاره فال حافظ بگیرید . قدرت گرفته از تک طرح
Fal.Taktarh.Com
تبلیغات شما
تبلیغات شما در این مکان, ماهانه 10.000 تومان
YourSite.Com
تبلیغات شما
تبلیغات شما در این مکان با نماش گوگل پلاس شما ماهانه 20.000 تومان
YourSite.Com
تبلیغات شما
تبلیغات شما در این مکان, ماهانه 10.000 تومان
YourSite.Com
تبلیغات شما
تبلیغات شما در این مکان, ماهانه 10.000 تومان
YourSite.Com
تبلیغات شما
تبلیغات شما در این مکان با نماش گوگل پلاس شما ماهانه 20.000 تومان
YourSite.Com
فال حافظ شیرازی | قدرت گرفته از تک طرح
با استفاده از این باکس فال حافظ بگیرید , ابتدا نیت کنید
شاید بهتر باشد برای شادی روح حافظ، صلوات یا فاتحه ای نثار نماییم
براي نمايش فال بر روي اعلان رو به رو کليک کنيد

چرخش تصاویر به کمک css3


در قسمت سوم سری مقالات css3 آموزش چرخاندن تصاویر رو براتون آماده کردم.

نمونه ای از چرخش در قالب خود سایت در تصاویر پست ها به کار رفته که تصاویر با -۲ درجه کج شده اند

Rotate Pictures in css3

کد زیر را برای تصویر قرار دهید

-webkit-transform: rotate(-2deg);
-moz-transform: rotate(-2deg);
-o-transform: rotate(-2deg);

سوالی بود در همین پست یا انجمن مطرح نمایید

موفق باشید

منبع : تک طرح

نهایت گرافیک
amin گفته :

سلام.
واقا کد جالبیه
ولی میشه بگی اینو کجای قالب باید بزارم
تو استایل؟


وحید گفته :

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


علی هدشی گفته :

ممنون وحید جان
ستون سمت چپ , بلوک اخر !


علی هدشی گفته :

بله تو استایل باید قرار بگیره
در قسمت نظرات نمیشه به طور صحیح کد نویسی کرد
اگه جواب دقیق تر میخوای توی انجمن سایت مطرح کن , موفق باشیق


وحید گفته :

ببخشید.ندیدم!
اما به نظر شما بلوک اخر یک سایت محل مناسبی برای نمایش مطالب این انجمن است؟
اون هم انجمنی مثل انجمن تک طرح


مهدی گفته :

خیلی ممنون که این قدر به فکر همه هستین !


آسمون دل مریمی گفته :

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


علی هدشی گفته :

سلام
اینا ترفند نیست . امکانات جدید css هست که به css3 اضافه شده
اگع استایل نویسی بلد باشید خیلی راحته
کافیه کد رو تو استایل قالبتون اضافه کنید


افشار گفته :

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


علی هدشی گفته :

سلام . از خاصیت hover و زاویه ۰ استفاده کنید


افشار گفته :

سلام
میشه بفرمایید باید دقیق چه کدی را بزارم


علی هدشی گفته :

شما به صورت img{code} استفاده کردید
برای حالتی که ماوس روی تصویر میره به صورت img:hover{code} استفاده کنید


افشار گفته :

سلام
تشکر علی آقا


charming گفته :

سلام،خدا قوت
عذر میخوام یه سوال داشتم :این کد رو کجای قالب وبلاگ باید گذاشت؟من هر کجای قالب میذارم که عمل نمیکنه!اگه راهنماییم کنین ممنونتون میشم.


صادق گفته :

درود بر شما دوست عزیز

این کد را می توان در وبلاگ میهن بلاگ استفاده کرد ؟ آموزش ها کامل نیست


علی هدشی گفته :

صادق جان این فقط یه استایل نویسیه سادس , برای عکس یک کلاس بساز و داخل کلاس این کد رو بریز
رو هر قالبی جواب میده و مشکلی پیش نمیاد


m3hdi گفته :

سلام خسته نباشید

میخواستم بگم که این کد همه ی عکس ها را ۲ درجه چرخش میده

اگه میشه کد چرخش، هنگامی که موس بر روی عکس میره را بدید
مانند سایت :
اسکریپت.com

با تشکر فراوان


ایلیاد موسوی گفته :

خیلی سادست میتونید از این کد استفاده کنید :
.img:hover {
-webkit-transform: rotate(-2deg);
-moz-transform: rotate(-2deg);
-o-transform: rotate(-2deg);
}


مسعود گفته :

واقعا css خیلی جالبه
ممنون


مسعود گفته :

اونوقت میشه کاری کرد که عکس یکسره بچرخه؟؟
ممنون میشم کدش رو بدین


مسعود گفته :

اگر دوست داشتین این Css ها رو هم توی این آموزش اضافه کنید جالبند

http://rockmyspace.tripod.com/id11.html


علی هدشی گفته :

اگه منظورتون motion کامل تصویر باشه میشه از جاوا استفاده کرد


محسن گفته :

سلام

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


taha گفته :

kheili dametoon garme baro baxe taktarh hal dadid ba in postetoon :*


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


تبادل لینک

عضویت در خبرنامه ی سایت آپلود سنتر پرتال اطلاع رسانی تک طرح تقویم سال 91


0
تنظیمات سایت