rotateبه شکل یک زنگوله ؟

[seb 25]

سلام به دوستان

چطوری میشه یک div به شکل یک زنگوله بچرخه؟؟؟

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

[PRGAME 175]

از انیمیشن در css 3 باید استفاده کنید.

این کد استایلش هست.:

.one img{
width:400px;
height:400px;
-webkit-animation:anime1 2s;
-webkit-transition: all 0.1s ease-out;
-moz-transition: all 0.1s ease-out;
-o-transition: all 0.1s ease-out;
transition: all 0.1s ease-out;
-ms-transition: all 0.1s ease-out;
-webkit-animation-iteration-count: infinite;
}
@-webkit-keyframes anime1{ 0%{-webkit-transform:rotate(30deg);} 50%{-webkit-transform:rotate(-30deg);} 100%{-webkit-transform:rotate(30deg);} }

اینم کد html :

<div class="one">
<img src="ادرس عکس شما" />
</div>

ویرایش شده آبان 91 توسط PRGAME

[seb 25]

ممنون داداش ولی این فقط تو کروم کار میکنه تویه فایرفاکس کار نمیکنه

[Farhad 276]

اينو امتحان كنيد‌:

.one img{
width:400px;
height:400px;
-webkit-animation:anime1 2s;
-webkit-transition: all 0.1s ease-out;
-moz-transition: all 0.1s ease-out;
-o-transition: all 0.1s ease-out;
transition: all 0.1s ease-out;
-ms-transition: all 0.1s ease-out;
-webkit-animation-iteration-count: infinite;
}
@-webkit-keyframes anime1{ 0%{-webkit-transform:rotate(30deg);} 50%{-webkit-transform:rotate(-30deg);} 100%{-webkit-transform:rotate(30deg);}

@-moz-keyframes anime1{ 0%{-moz-transform:rotate(30deg);} 50%{-moz-transform:rotate(-30deg);} 100%{-moz-transform:rotate(30deg);}

@-o-keyframes anime1{ 0%{-o-transform:rotate(30deg);} 50%{-o-transform:rotate(-30deg);} 100%{-o-transform:rotate(30deg);}

}

[PRGAME 175]

ممنون داداش ولی این فقط تو کروم کار میکنه تویه فایرفاکس کار نمیکنه

ببخشید یادم رفته بود برای بقیه مرورگر ها کدش رو بزارم که یکی از دوستان زحمتش رو کشید!

البته باید اینو جایگزین کنید که کامل بشه :

.one img{
width:400px;
height:400px;
-webkit-animation:anime1 2s;
-ms-animation:anime1 2s;
-moz-animation:anime1 2s;
-o-animation:anime1 2s;
-webkit-transition: all 0.1s ease-out;
-moz-transition: all 0.1s ease-out;
-o-transition: all 0.1s ease-out;
transition: all 0.1s ease-out;
-ms-transition: all 0.1s ease-out;
-webkit-animation-iteration-count: infinite;
-ms-animation-iteration-count: infinite;
-moz-animation-iteration-count: infinite;
-o-animation-iteration-count: infinite;
}
@-webkit-keyframes anime1{ 0%{-webkit-transform:rotate(30deg);} 50%{-webkit-transform:rotate(-30deg);} 100%{-webkit-transform:rotate(30deg);} }
@-o-keyframes anime1{ 0%{-webkit-transform:rotate(30deg);} 50%{-webkit-transform:rotate(-30deg);} 100%{-webkit-transform:rotate(30deg);} }
@-moz-keyframes anime1{ 0%{-webkit-transform:rotate(30deg);} 50%{-webkit-transform:rotate(-30deg);} 100%{-webkit-transform:rotate(30deg);} }
@-ms-keyframes anime1{ 0%{-webkit-transform:rotate(30deg);} 50%{-webkit-transform:rotate(-30deg);} 100%{-webkit-transform:rotate(30deg);} }

ویرایش شده آبان 91 توسط PRGAME

[seb 25]

سلام اجرا نشد میشه یک دمو بذاری ؟

[Morteza 34190]

http://jsfiddle.net/dAGfx/