با عرض سلام  خدمت همه ی دوستان و طرفداران سایت دکتر وردپرس که منت رو سره ما می ذارین و همیشه به ما سر میزنین.در خدمت شما هستیم با استایل چرخش ۳۶۰ درجه لوگو و تصاویر سایت.با ما باشید…

استایل چرخش 360 درجه لوگو

استایل چرخش ۳۶۰ درجه لوگو دوستان و تصاویر سایت

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

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


.logo img {
-webkit-border-radius: 0.1px;
-moz-border-radius: 0.1px;
border-radius: 0.1px;
width: 40px;
height: 40px;
transition: all 1s;
}
.logo img:hover {
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-o-transform: rotate(360deg);
-ms-transform: rotate(360deg);
-webkit-border-radius: 50px;
-moz-border-radius: 50px;
border-radius: 50px;
transform: rotate(360deg);
opacity: .7;
}

نکته این که گوشه های تصویر هم حین گردش گرد و قشنگ میشه . کدهای بالا رو در فایل style.css طبق گفته های بالا با تغییر نام کلاس logo متناسب با قالب خودتون قرار بدید.

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

پیش نمایش و دانلود کد چرخش عکس در css

پیش نمایش استایل

لینک دانلود

امتیاز شما از 1 تا 5
1 ستاره میدم به نوشته2 ستاره میدم به نوشته3 ستاره میدم به نوشته4 ستاره میدم به نوشته5 ستاره میدم به نوشته 4 رای
Loading...