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नियम के अंदर keyframes को नेस्ट किया है , और यह गलत है
2. float:left पूरी तरह से तैनात तत्वों पर काम नहीं करेगा
3. Caniuse पर एक नज़र है : IE10 -ms-उपसर्ग की जरूरत नहीं है

Comments

अगर कोई भी अपने कोड में यह कोशिश करता है: नीचे @ अनुभाग न लिखें

— जैक एम।

हैलो मैं 5s के बाद एनीमेशन इन्फिनिटी रोटेशन को रोक सकता हूं?

— एमडी आशिक

जब मैंने एनीमेशन चलाया तो मैंने अपना पानी लगभग बाहर कर दिया।

— रज़ग्रीज़

" float:left won't work on absolutely positioned elements", यह उन्हें न्यूनतम आकार तक सिकोड़ देगा, जो कि प्रदर्शन के समान है: इनलाइन-ब्लॉक करता है

— gregn3

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);IE के लिए

— डस्टी

कृपया टूटी हुई वेबसाइट लिंक पर स्थानीय उदाहरण चुनें।

— एवोल्यूशनबॉक्स

लिंक अब टूट गया है

— मार्कस बुचर

Answer 3

360 डिग्री रोटेशन प्राप्त करने के लिए, यहां कार्य समाधान है ।

HTML:

<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

Field काम नहीं करता है OO Chrome निरीक्षक आपके CSS को पसंद नहीं करता है, विशेष रूप से "ट्रांस्फ़ॉर्म" और "ट्रांज़िशन-प्रॉपर्टी" को। बाप रे।

— बस प्लेन हाई

इसके लिए आपको -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 लिंक आपको यह समझने में मदद करेगा कि एक छवि को कैसे घुमाया जाए। मैंने एक घड़ी के डायल को घुमाने के लिए उसी का उपयोग किया था।

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: वर्तमान समय,

• b: begInnIng मान,

• c: मूल्य में परिवर्तन,

• डी: अवधि,

• एक्स: अप्रयुक्त

कोई सहजता (रैखिक सहजता): फ़ंक्शन (x, t, b, c, d) {वापसी b + (t / d) * c; }

Comments

यदि आप थोड़ी और जानकारी प्रदान करते हैं (जैसे आप फिडेल में करते हैं) तो मैं इस उत्तर को बढ़ा दूंगा। मुझे यह भी लगता है कि आपको यह उल्लेख करना चाहिए कि यह एक jQuery प्लगइन है क्योंकि मैं सभी की तरह था, "मुझे नहीं पता था कि jQuery ऐसा कर सकता है !!! ^ _ ^ फिडल ओह इंतजार लग रहा है ... U_U"

— जस्ट प्लेन हाई

एक्स, टी, बी, सी, डी वेरिएबल्स (जैसे आप फिडेल में करते हैं) का स्पष्टीकरण और स्पष्ट रूप से बताते हैं कि हालांकि यह ओपी द्वारा अनुरोध के रूप में सीएसएस समाधान नहीं है, यह काफी सरल और प्रभावी jQuery प्लगइन समाधान है: )

— जस्ट प्ले हाई हाई

Downvoted। ओपी एक जावास्क्रिप्ट समाधान का अनुरोध नहीं करता था, विशेष रूप से एक jQuery प्लगइन नहीं। जो पूछा जा रहा है उससे चिपके रहो।

— कार्वर