उत्पत्ति के आसपास CSS3 में घुमाने के लिए कैसे?

मैं के रूप में निम्नलिखित पत्र एबीसी नीचे दिखाया गया है:उत्पत्ति के आसपास CSS3 में घुमाने के लिए कैसे?

<body> 
<div id="container"> 
    <div id="shape" class="spin"> 
    <div id="A" class="plane">A</div> 
    <div id="B" class="plane">B</div>  
    <div id="C" class="plane">C</div> 
    </div> 
</div>

क्या मैं चाहता हूँ अपनी एक्स अक्ष के चारों ओर स्पिन के लिए प्रत्येक अक्षर है?

#C { 
-webkit-animation: spinAboutItsCentre 8s linear; 
} 

@-webkit-keyframes spinAboutItsCentre { 
    from { 
     -webkit-transform: rotateX(0); 
    } 
    to { 

    -webkit-transform: rotateX(360deg); 
    } 
}

लेकिन अक्षर C जहां पत्र एक एक यह अपनी धुरी घूमती है पर चलता है:

मैं (अक्षर C के लिए) की कोशिश की।

कोई विचार?

जद

स्रोत

2011-08-10 JD.

क्या आप वाकई 'घुमाने' की बजाय 'rotateX' चाहते हैं? क्या आप अपने शेष कोड के साथ एक jsFiddle बना सकते हैं? –

इसे ऐसा कुछ दिखना चाहिए, आपको अपनी ट्रांसफॉर्म-मूल गुण निर्दिष्ट करने की आवश्यकता है; एक्स-%, वाई-%, और जेड-पीएक्स।

वाई-अक्ष के बारे में कताई नोटिस ऑफसेट का थोड़ा सा बनाता है क्योंकि चरित्र की स्थिति की इंजन की व्याख्या वस्तु की "शुरुआत" (तरफ) वस्तु से उत्पन्न होती है, वस्तु का केंद्र नहीं।

0% और 100% पदनाम आपके "से" और "से" खंडों का प्रतिनिधित्व करते हैं, यह प्रारूप आपको इन पंक्तियों में से कई को जोड़ने की अनुमति देता है क्योंकि आप अपने निर्दिष्ट समय सीमा पर आंदोलन को बढ़ाने की इच्छा रखते हैं (यानी 25% घुमाव 90 डिग्री , 50% घुमाव 180 डिग्री, 75% घुमावदार 270deg, 100% घूर्णन 360deg)।

@-webkit-keyframes spinX 
{ 
0% {-webkit-transform: rotateX(0deg); -webkit-transform-origin: 0% 50% 0;} 
100% {-webkit-transform: rotateX(360deg); -webkit-transform-origin: 0% 50% 0;} 
} 

@-webkit-keyframes spinY 
{ 
0% {-webkit-transform: rotateY(0deg); -webkit-transform-origin: 0% 0% 5;} 
100% {-webkit-transform: rotateY(360deg); -webkit-transform-origin: 0% 0% 5;} 
}

इन शैलियों को आजमाएं, उन्हें ठीक से काम करना चाहिए।

#Ca 
{ 
position: absolute; 
left: 20%; 
font-size:72px; 
-webkit-animation: spinX 8s infinite; 
} 

#Cb 
{ 
position: absolute; 
left: 20%; 
font-size:72px; 
-webkit-animation: spinY 8s infinite; 
} 

<div id="Ca">C</div> 
<div id="Cb">C</div>

स्रोत

2011-08-10 20:39:49 Chris

धन्यवाद क्रिस, बस अपने कोड के चारों ओर अपने सिर हो रही है। मैंने देखा कि मैंने एक परिवर्तन किया: # सी {अस्पष्टता: 0.5; -webkit-transform: translateX (400px)}; और मैं सोच रहा हूं कि क्या समस्या है? अगर मैं इस कोड को छोड़ देता हूं, तो क्या मैं अभी भी एक रोटेशन लागू कर सकता हूं? } –

आप -webkit- उपसर्ग का उपयोग कर रहे हैं, इसलिए मुझे लगता है कि आपने क्रोम और सफारी में अपने सीएसएस का परीक्षण किया है क्योंकि आईई, फ़ायरफ़ॉक्स और ओपेरा के उपसर्ग हैं-ms-, -moz-, और - ओ- क्रमशः (कम से कम अब के लिए); कहा जा रहा है कि, मैंने क्रोम और सफारी दोनों में पोस्ट की गई विधि की जांच की है जिसकी कीमत 0.5 घोषित की गई है और यह दोनों में ठीक काम करता है। ऐसा लगता है कि ब्राउज़र को यह कहने के लिए और अधिक करना है कि रोटेशन के लिए चरित्र को कैसे/कहाँ एंकर करना है। यह CSS3 फीचर कैसे काम करता है यह एक महान डेमो है: http://www.w3schools.com/cssref/trycss3_transform-origin_3d_inuse.htm – Chris

हाय क्रिस, आपकी मदद के लिए धन्यवाद। –

Transforms एक "बदलने मूल" उन लोगों के साथ जुड़ा हुआ है। जब कोई ट्रांसफॉर्म उत्पत्ति निर्दिष्ट नहीं होती है, तो यह स्वचालित रूप से तत्व के (50%, 50%) पर सेट हो जाती है। जब आपका सटीक कोड jsfiddle के रूप में दर्ज किया जाता है, तो यह इच्छित के रूप में कार्य करता है।

मेरा अनुमान है कि आपके पूर्ण कोड में आपने गलत रूप से एक ट्रांसफॉर्म उत्पत्ति निर्दिष्ट की है या आपकी कक्षा के लिए बेस सीएसएस में अन्य अजीबता है।

अपडेट: तो, हाँ, आपको मूल सीएसएस में अजीबता थी। डीबगिंग के लिए पूर्ण सीएसएस और एचटीएमएल देखना उपयोगी होगा।

स्रोत

2011-08-10 17:11:04

उत्पत्ति के आसपास CSS3 में घुमाने के लिए कैसे?

उत्तर

संबंधित मुद्दे