html - Rotate Circle with css hover -

इस सवाल का पहले से ही एक उत्तर है: < / P>

• 4 जवाब

  मैंने एक साधारण वेबसाइट बनाई है:

  तो एक छवि के ऊपर एक वृत्त है, मैंने बारी बारी से करने की कोशिश की यह मंडराना पर है, लेकिन यह केवल अभ्यस्त काम किया! यहाँ मेरा कोड है! <पूर्व> & lt; div class = "image" id = "भूखंड" & gt; & Lt; img src = "reg.png" alt = "" width = "100%" ऊंचाई = "ऑटो" / & gt; & Lt; span id = "motha2" & gt; & Lt; h6 & gt; & lt; br & gt; यहां & lt; br & gt; मैं & lt; / h6 & gt; & Lt; / span & gt; & Lt; / div & gt; H6 {text-align: केंद्र; रंग: # f2f2f2; फ़ॉन्ट-आकार: 75px; रेखा-ऊंचाई: 74px; font-weight: 700; मार्जिन: 0 5px 24px; फ़ॉन्ट-परिवार: 'रूट';} # मोथा 2 {स्थिति: निरपेक्ष; शीर्ष: 1 पीएक्स; बाएं: 15%; चौड़ाई: 300px; ऊंचाई: 300px; सीमा-त्रिज्या: 150px; पृष्ठभूमि रंग: # 4ec461; } H6: हॉवर {रूपांतरण: घुमाने के लिए (-90 डिग्री);}

  UPDATEUPDATE !!!!!!!!!!!!!!!!!!!!!!!! !!

  ठीक है, संक्रमण काम करता है लेकिन मैं कैसे छेद संक्रमण चिकनी बना सकता हूँ और यह जांचने के लिए पहले इसे 15 डिग्री से 15 डिग्री तक घुमाने और अंत में 0deg पर बंद हो जाता है? < यदि आप की आवश्यकता होती है तो "15 डिग्री तक घूमता है और अंत में 0deg पर बंद हो जाता है"

  आपको बदलना होगा

  h6: hover {transform: rotate (-90deg);}

  से

    h6: hover {-moz- एनिमेशन-नाम: 1 एस रैखिक घुमाए 1; -वेबकिट-एनीमेशन-नाम: 1 एस रैखिक घुमाए 1; एनिमेशन-नाम: 1 एस रैखिक घुमाए 1; } @ -मोझ-कीफ्रेम घुमाएँ {0%, 100% {-moz-transform: rotate (0deg);} 33% {-moz-transform: rotate (15deg)}} 66% {-मोज़-ट्रांस्फ़ॉर्म: घुमाएं (- 15deg);}} @-वेबकिट-कीफ्रेम घुमाएँ {0%, 100% {-webkit-transform: rotate (0deg);} 33% {-वीबीकिट-ट्रांसफॉर्मः घुमाएं (15deg)}} 66% {-webkit-transform : बारी बारी से (-15 डिग्री);}} @ कीफ्रेम घुमाएँ {0%, 100% {रूपांतरण: घुमाने के लिए (0deg);} 33% {रूपांतरण: घुमाएं (15 डिग्री);} 66% {रूपांतरण: घुमाएँ (-15 डिग्री);} }