seb

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

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

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

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

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

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


لینک به پست

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

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


لینک به پست

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

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


لینک به پست

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


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

}

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


لینک به پست

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

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

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


.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

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


لینک به پست

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

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


لینک به پست

http://jsfiddle.net/dAGfx/

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


لینک به پست

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

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

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

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


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

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

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


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