seb

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

7 پست در این موضوع قرار دارد

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

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

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

0

به اشتراک گذاری این پست


لینک به پست

ارسال شده در (ویرایش شده)

از انیمیشن در 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>

ویرایش شده در توسط PRGAME
5

به اشتراک گذاری این پست


لینک به پست

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

0

به اشتراک گذاری این پست


لینک به پست

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


.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);}

}

4

به اشتراک گذاری این پست


لینک به پست

ارسال شده در (ویرایش شده)

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

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

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


.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);} }

ویرایش شده در توسط PRGAME
2

به اشتراک گذاری این پست


لینک به پست

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

0

به اشتراک گذاری این پست


لینک به پست

http://jsfiddle.net/dAGfx/

3

به اشتراک گذاری این پست


لینک به پست

برای ارسال نظر یک حساب کاربری ایجاد کنید یا وارد حساب خود شوید

برای اینکه بتوانید نظر ارسال کنید نیاز دارید که کاربر سایت شوید

ایجاد یک حساب کاربری

برای حساب کاربری جدید در انجمن ما ثبت نام کنید. عضویت خیلی ساده است !


ثبت نام یک حساب کاربری جدید

ورود به حساب کاربری

دارای حساب کاربری هستید؟ از اینجا وارد شوید


ورود به حساب کاربری