CSS3 আবর্তিত অ্যানিমেশন

Question

<img class="image" src="" alt="" width="120" height="120">

এই অ্যানিমেটেড চিত্রটি কাজ করতে পারে না, এটি 360 ডিগ্রি রোটেশন করার কথা।

আমি অনুমান করি যে নীচে সিএসএসে কিছু ভুল হয়েছে কারণ এটি কেবল স্থির থাকে।

.image {
    float: left;
    margin: 0 auto;
    position: absolute;
    top: 50%;
    left: 50%;
    width: 120px;
    height: 120px;
    margin-top: -60px;
    margin-left: -60px;

    -webkit-animation-name: spin;
    -webkit-animation-duration: 4000ms;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;

    -moz-animation-name: spin;
    -moz-animation-duration: 4000ms;
    -moz-animation-iteration-count: infinite;
    -moz-animation-timing-function: linear;

    -ms-animation-name: spin;
    -ms-animation-duration: 4000ms;
    -ms-animation-iteration-count: infinite;
    -ms-animation-timing-function: linear;

    animation-name: spin;
    animation-duration: 4000ms;
    animation-iteration-count: infinite;
    animation-timing-function: linear;

    @-ms-keyframes spin { 
        from { 
            -ms-transform: rotate(0deg); 
        } to { 
            -ms-transform: rotate(360deg); 
        }
    }
    @-moz-keyframes spin { 
        from { 
            -moz-transform: rotate(0deg); 
        } to { 
            -moz-transform: rotate(360deg); 
        }
    }
    @-webkit-keyframes spin { 
        from { 
            -webkit-transform: rotate(0deg); 
        } to { 
            -webkit-transform: rotate(360deg); 
        }
    }
    @keyframes spin { 
        from { 
            transform: rotate(0deg); 
        } to { 
            transform: rotate(360deg); 
        }
    }
}

Answer 1

এখানে একটি ডেমো রয়েছে । সঠিক অ্যানিমেশন সিএসএস:

.image {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 120px;
    height: 120px;
    margin:-60px 0 0 -60px;
    -webkit-animation:spin 4s linear infinite;
    -moz-animation:spin 4s linear infinite;
    animation:spin 4s linear infinite;
}
@-moz-keyframes spin { 100% { -moz-transform: rotate(360deg); } }
@-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } }
@keyframes spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } }

<img class="image" src="http://i.stack.imgur.com/pC1Tv.jpg" alt="" width="120" height="120">

---

আপনার কোডে কিছু নোট:

1. আপনি .imageনিয়মের ভিতরে কীফ্রেমগুলি নেস্ট করেছেন এবং এটি ভুল
2. float:left একেবারে অবস্থানযুক্ত উপাদানগুলিতে কাজ করবে না
3. ক্যানিউজটি দেখুন: আই 10 এর -ms-উপসর্গের দরকার নেই

Comments

যদি কেউ তাদের নিজস্ব কোডে এটি চেষ্টা করে: নীচে নীচে @ বিভাগটি ভুলে যান

— জ্যাক এম।

হ্যালো আমি কি 5s এর পরে অ্যানিমেশন ইনফিনিটি রোটেশন বন্ধ করতে পারি?

— এমডি আশিক

অ্যানিমেশনটি চালানোর সময় আমি প্রায় আমার জল ছিটাই।

— রাগ্রগ্রিজ

" float:left won't work on absolutely positioned elements", এটি ন্যূনতম আকারে সঙ্কুচিত হবে, যা প্রদর্শন মতো: ইনলাইন-ব্লক করে

— গ্রেগন 3

Answer 2

আপনার মতো একই জিনিস ব্যবহার করে আমার একটি ঘোরানো চিত্র রয়েছে:

.knoop1 img{
    position:absolute;
    width:114px;
    height:114px;
    top:400px;
    margin:0 auto;
    margin-left:-195px;
    z-index:0;

    -webkit-transition-duration: 0.8s;
    -moz-transition-duration: 0.8s;
    -o-transition-duration: 0.8s;
    transition-duration: 0.8s;

    -webkit-transition-property: -webkit-transform;
    -moz-transition-property: -moz-transform;
    -o-transition-property: -o-transform;
     transition-property: transform;

     overflow:hidden;
}

.knoop1:hover img{
    -webkit-transform:rotate(360deg);
    -moz-transform:rotate(360deg); 
    -o-transform:rotate(360deg);
}

Comments

যোগ করুন: transform:rotate(360deg);

— ডাস্টি

ভাঙা ওয়েবসাইট লিঙ্কের উপর স্থানীয় উদাহরণ চয়ন করুন।

— বিবর্তনবক্স

লিঙ্কটি এখন ভেঙে গেছে।

— মার্কাস বুচার

Answer 3

360 ডিগ্রি ঘূর্ণন অর্জন করতে, এখানে ওয়ার্কিং সলিউশন ।

এইচটিএমএল:

<img class="image" src="your-image.png">

সিএসএস:

.image {
    overflow: hidden;
    transition-duration: 0.8s;
    transition-property: transform;
}
.image:hover {
    transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
}

আপনাকে চিত্রটিতে ঘুরে বেড়াতে হবে এবং আপনি 360 ডিগ্রি ঘূর্ণন প্রভাব পাবেন।

পিএস: -webkit-ক্রোম এবং অন্যান্য ওয়েবকিট ব্রাউজারগুলিতে এটি কাজ করার জন্য একটি এক্সটেনশন যুক্ত করুন । আপনি এখানে ওয়েবকিটের জন্য আপডেট হওয়া ফিডলটি চেক করতে পারেন

Comments

ফিডল কাজ করে না ও ও ক্রোম ইন্সপেক্টর আপনার সিএসএস পছন্দ করেন না, বিশেষত "রূপান্তর" এবং "রূপান্তর-সম্পত্তি"। ওহে প্রিয়।

— জাস্ট প্লেইন

তার -webkit-tranformজন্য এটির কাজ করার জন্য আপনাকে একটি যুক্ত করতে হবে । এখানে আপডেট করা ফিজল। jsfiddle.net/sELBM/172 - @ JustPlainHigh

— নীতেশ

2017: এটি এখন খুব ভাল সমর্থিত এবং অ-অসীম ঘোরানোর জন্য একটি পছন্দীয় উপায়। -webkit-উপসর্গ আর প্রয়োজন হয় না এবং নিরাপদে মুছে ফেলা যেতে পারে। ব্রাউজার সমর্থন: caniuse.com/#search=transforms

— Alph.Dev

Answer 4

আপনি যদি ছবিটি ফ্লিপ করতে চান তবে আপনি এটি ব্যবহার করতে পারেন।

.image{
    width: 100%;
    -webkit-animation:spin 3s linear infinite;
    -moz-animation:spin 3s linear infinite;
    animation:spin 3s linear infinite;
}
@-moz-keyframes spin { 50% { -moz-transform: rotateY(90deg); } }
@-webkit-keyframes spin { 50% { -webkit-transform: rotateY(90deg); } }
@keyframes spin { 50% { -webkit-transform: rotateY(90deg); transform:rotateY(90deg); } }

Answer 5

.image {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 120px;
    height: 120px;
    margin:-60px 0 0 -60px;
    -webkit-animation:spin 4s linear infinite;
    -moz-animation:spin 4s linear infinite;
    animation:spin 4s linear infinite;
}
@-moz-keyframes spin { 100% { -moz-transform: rotate(360deg); } }
@-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } }
@keyframes spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } }

<img class="image" src="http://i.stack.imgur.com/pC1Tv.jpg" alt="" width="120" height="120">

Answer 6

এই সহজ চেষ্টা করুন

 
 .btn-circle span {
     top: 0;
   
      position: absolute;
     font-size: 18px;
       text-align: center;
    text-decoration: none;
      -webkit-animation:spin 4s linear infinite;
    -moz-animation:spin 4s linear infinite;
    animation:spin 4s linear infinite;
}

.btn-circle span :hover {
 color :silver;
}


/* rotate 360 key for refresh btn */
@-moz-keyframes spin { 100% { -moz-transform: rotate(360deg); } }
@-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } }
@keyframes spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } } 

 <button type="button" class="btn btn-success btn-circle" ><span class="glyphicon">&#x21bb;</span></button>

Answer 7

এখানে এটি আপনাকে সহায়তা করা উচিত

নীচের jsfiddle লিঙ্কটি আপনাকে কীভাবে কোনও চিত্র ঘোরানো যায় তা বুঝতে সহায়তা করবে I আমি একটি ঘড়ির ডায়াল ঘোরানোর জন্য একই ব্যবহার করেছি।

http://jsfiddle.net/xw89p/

var rotation = function (){
   $("#image").rotate({
      angle:0, 
      animateTo:360, 
      callback: rotation,
      easing: function (x,t,b,c,d){       
          return c*(t/d)+b;
      }
   });
}
rotation();

কোথায়: • t: বর্তমান সময়,

• বি: মিনতি মূল্য,

• সি: মান পরিবর্তন,

• d: সময়কাল,

। X: অব্যবহৃত

কোনও ইজিং নয় (লিনিয়ার ইজাইং): ফাংশন (এক্স, টি, বি, সি, ডি) {রিটার্ন বি + (টি / ডি) * সি; }

Comments

আপনি যদি কিছুটা আরও তথ্য সরবরাহ করেন (যেমন আপনি ফ্রিডলে করেন) তবে আমি এই উত্তরটি আপভোট করব। আমি আপনারও মনে করি এটি একটি jQuery প্লাগইন হিসাবে উল্লেখ করা উচিত কারণ আমি সবার মতো ছিলাম, "আমি জানতাম না যে jQuery এটি করতে পারে !!! ^ _ iddle ফিডাল দেখায় ওহ অপেক্ষা করুন ... U_U"

— জাস্ট প্লেইন হাই

এক্স, টি, বি, সি, ডি ভেরিয়েবলের ব্যাখ্যা (যেমন আপনি ফ্রেডে করেন) এবং স্পষ্টভাবে উল্লেখ করে যে এটি ওপি-র অনুরোধ অনুযায়ী কোনও সিএসএস সমাধান নয়, এটি বেশ সহজ এবং কার্যকর jQuery প্লাগইন সমাধান: )

— জাস্ট প্লেইন হাই

Downvoted। ওপি একটি জাভাস্ক্রিপ্ট সমাধানের অনুরোধ করে নি, বিশেষত একটি jQuery প্লাগইন নয়। যা চাওয়া হচ্ছে তাতে লেগে থাকুন।

— TheCarver