"यदि कोई कर्मचारी अपना काम अच्छी तरह से करना चाहता है, तो उसे पहले अपने औजारों को तेज करना होगा।" - कन्फ्यूशियस, "द एनालेक्ट्स ऑफ कन्फ्यूशियस। लू लिंगगोंग"
ऑनलाइन उपकरण
सॉफ्टवेयर ट्यूटोरियल
साइट नेविगेशन
प्रोग्रामिंग
मुखपृष्ठ > प्रोग्रामिंग > फ्लोटिंग कैट और क्यूब गेम गाइड

फ्लोटिंग कैट और क्यूब गेम गाइड

2025-04-19 को पोस्ट किया गया
ब्राउज़ करें:944

] थोड़ी देर के अंतरालकता के बारे में कुछ पृष्ठ में जीवन जोड़ता है।

आप एक तैरती हुई बिल्ली चाहते हैं? कोई बात नहीं। मैंने एआई का उपयोग करके एक बिल्ली की एक छवि बनाई और मेरी .png छवि के लिए एक अच्छा कट-आउट प्रभाव प्राप्त करने के लिए "हाथ से" के लिए "हाथ से" की पृष्ठभूमि निकाली। बाम। बिल्ली।

उसे थोड़ा आगे बढ़ने देता है ताकि ऐसा लगे कि वह तैर रहा है। मेरे पसंदीदा सीएसएस एनिमेशन में से एक ऑर्बिट है। यह वास्तव में उपयोगी है और आप इसके साथ बहुत कुछ कर सकते हैं।

बिल्ली

] ]

अब, मेरी सीएसएस फ़ाइल में, मैं "कैट" के लिए अपनी शैली का निर्माण करता हूं। बिल्ली में, हम अपने एनीमेशन, कक्षा को कहते हैं, जैसा कि नीचे दिखाया गया है।

।बिल्ली { एनीमेशन: ऑर्बिट 3 एस अनंत रैखिक; } @KeyFrames ऑर्बिट { से { ट्रांसफॉर्म: रोटेट (0DEG) ट्रांसलेक्स (15px) रोटेट (0DEG); } को { ट्रांसफॉर्म: रोटेट (360DEG) ट्रांसलेक्स (15px) रोटेट (-360DEG); } }

] ] -360 का दूसरा रोटेशन बिल्ली को सीधा रखने के लिए, पहले रोटेशन को रद्द कर रहा है। यदि आप सिर्फ एनीमेशन देखते हैं तो यह आसान है। Xd।

] बस रोमांचक होने के लिए पर्याप्त है। 

.cat {
  animation: orbit 3s infinite linear;
}

@keyframes orbit {
  from {
    transform: rotate(0deg) translateX(15px) rotate(0deg);
  }
  to {
    transform: rotate(360deg) translateX(15px) rotate(-360deg);
  }
}
बाईं ओर थोड़ा सा,

दाईं ओर थोड़ा सा।



जादू!
Floating Cats and Cubes
घनक्षेत्र

मैंने पहले सीखा था कि सीएसएस के साथ एक क्यूब कैसे बनाया जाए। जबकि यह ठीक है और बांका है, मुझे आज एक गतिशील तरीके से क्यूब का उपयोग करने के बारे में जंगली बाल विचार मिला। मैं वास्तविक समय में डेटा के साथ क्यूब चेहरों को पॉप्युलेट करना चाहता था। जैसे कहते हैं, अगले कुछ आगामी कार्यक्रम। लैंडिंग पेज पर एक मजेदार खोज करने वाली चीज़ के रूप में। क्यों नहीं। यह रोमांचक है।
Floating Cats and Cubes तो कुछ भी, मैं दृश्य में कंकाल का निर्माण करता हूं। हमारे क्यूब को एक घर की जरूरत है।

मुझे कुछ रेडियो बटन मिले हैं ताकि उपयोगकर्ता क्यूब के साथ बातचीत कर सके।

प्रत्येक रेडियो बटन एक अलग घन चेहरा दिखाएगा।

मैं एक लूप में प्रत्येक चेहरे पर प्रदर्शित करना चाहता हूं:

CSS को संभालना एक नृत्य है। विशेष रूप से व्यूपोर्ट के साथ और क्या नहीं। यह मोबाइल के लिए जवाब नहीं है, लेकिन यह काम करेगा और एक बड़ी स्क्रीन पर कार्यात्मक होगा, LOL। मैं बस तुम्हारे लिए यह यहाँ छोड़ने जा रहा हूँ। छोटे स्क्रीन आकार को संभालने के लिए सुझावों के लिए खोलें। 


 






/*=============
घूर्णन क्यूब
==============*/

.cube-container {
  चौड़ाई: 30VW;
  ऊंचाई: 40vh;
  पाठ-संरेखण: केंद्र;
  परिप्रेक्ष्य: 100em;    
}

.cube {
  चौड़ाई: 100%;
  ऊंचाई: 100%;
  स्थिति: रिश्तेदार;
  ट्रांसफॉर्म-स्टाइल: प्रिजर्व -3 डी;
  संक्रमण-अवधि: 2 एस;
  सीमा: 5px ठोस पारदर्शी;  
  मार्जिन-टॉप: 100px; 
  प्रदर्शन: ब्लॉक;
}

.cube-side {
  स्थिति: निरपेक्ष;
  चौड़ाई: 300px;
  ऊंचाई: 300px;
  पृष्ठभूमि-रंग: आरजीबी (64, 0, 148);
  सीमा: 1px ठोस सफेद;
  पृष्ठभूमि-स्थिति: केंद्र;
  पृष्ठभूमि का आकार: कवर;
  सीमा: 4px ठोस चूना;
}

.cube-side: nth-child (1) {
  ट्रांसफॉर्म: रोटेटी (0DEG) ट्रांसलेट (10EM);
}

.cube-side: nth-child (2) {
  ट्रांसफॉर्म: रोटेटी (90DEG) ट्रांसलेट (10EM);
}

.cube-side: nth-child (3) {
  ट्रांसफॉर्म: रोटेटी (180DEG) ट्रांसलेट (10EM);
}

.cube-side: nth-child (4) {
  ट्रांसफॉर्म: रोटेटी (-90DEG) ट्रांसलेट (10EM);
}

.cube-side: nth-child (5) {
  ट्रांसफॉर्म: रोटेटेक्स (90DEG) ट्रांसलेट (9.75EM);
  बॉर्डर-टॉप: 8px सॉलिड लाइम;
  सीमा-तल: 8px ठोस चूना;
}

.cube-side: nth-child (6) {
  ट्रांसफ़ॉर्म: रोटेटेक्स (-90DEG) ट्रांसलेट (9.3EM);
  बॉर्डर-टॉप: 8px सॉलिड लाइम;
  सीमा-तल: 8px ठोस चूना;
}


/ * क्यूब रेडियो बटन */

।रेडियो की बटन {
  ट्रांसफॉर्म: ट्रांसलेक्स (-50px);
}

.Radio-Button: चेक किया गया ~ .cube {
  संक्रमण-अवधि: 3 एस;
  संक्रमण-टाइमिंग-फंक्शन: क्यूबिक-बीज़ियर (0.19। 1, 0.22, 1);
}

.Radio-Button: nth-child (1): चेक किया गया ~ .cube {
  ट्रांसफॉर्म: रोटेटेक्स (-15DEG) रोटेटी (20DEG);
}

.Radio-Button: nth-child (2): चेक किया गया ~ .cube {
  ट्रांसफॉर्म: रोटेटेक्स (-15DEG) रोटेटी (180DEG);
}

.Radio-Button: nth-Child (3): चेक किया गया ~ .cube {
  ट्रांसफॉर्म: रोटेटेक्स (-15DEG) रोटेटी (90DEG);
}

.Radio-Button: nth-child (4): चेक किया गया ~ .cube {
  ट्रांसफॉर्म: रोटेटेक्स (-15DEG) रोटेटी (-90DEG);
}

.Radio-Button: nth-child (5): चेक किया गया ~ .cube {
  ट्रांसफॉर्म: रोटेटेक्स (-105DEG) रोटेटी (0DEG);
}

.Radio-Button: nth-Child (6): चेक किया गया ~ .cube {
  ट्रांसफॉर्म: रोटेटेक्स (75DEG) रोटेटी (0DEG);
}








 प्रत्येक बटन और पक्ष को व्यक्तिगत रूप से संभाला जा रहा है। अगर यह मौजूद है तो मैं और अधिक सुरुचिपूर्ण समाधान देखना पसंद करूंगा। 


Floating Cats and Cubes मैं वास्तव में उत्साहित हूं कि यह काम किया है। 



तलाश के लिए धन्यवाद!



          


            
        
            

            
            

                        

              विज्ञप्ति वक्तव्य
              
                इस लेख को पुन: प्रस्तुत किया गया है: https://dev.to/annavi11arrea1/floating-cats-and-3d-cubes-537l?1 यदि कोई उल्लंघन है, तो कृपया इसे हटाने के लिए [email protected] से संपर्क करें।               
              
            

                      

          

          

            

              नवीनतम ट्यूटोरियल
              अधिक>
            

            
          

        

        

          

            

              वर्गीकरणअधिक>
            

            

                            जापानी सीखें
                            कोरियाई सीखो
                            चीनी सीखें
                            विदेशी भाषा सीखें
                            खेल
                            आम समस्या
                            प्रौद्योगिकी परिधीय
                            ऐ
                            सॉफ्टवेयर ट्यूटोरियल
                            प्रोग्रामिंग
                            लेख
                          

          

          

            

              
चीनी भाषा का अध्ययन करें

            

            
          

          

            

              औजारअधिक>
            

            

                            
                
                

                  
छवि बेस64 डिकोडिंग

                

              
                            
                
                

                  
चीनी पिनयिन

                

              
                            
                
                

                  
यूनिकोड एन्कोडिंग

                

              
                            
                
                

                  
जेएस ऑबफस्केशन एन्क्रिप्शन संपीड़न

                

              
                            
                
                

                  
यूआरएल हेक्साडेसिमल एन्क्रिप्शन उपकरण

                

              
                            
                
                

                  
UTF-8 एन्कोडिंग रूपांतरण उपकरण

                

              
                            
                
                

                  
ऑनलाइन Ascii एन्कोडिंग और डिकोडिंग उपकरण

                

              
                            
                
                

                  
MD5 एन्क्रिप्शन उपकरण

                

              
                            
                
                

                  
हैश/हैश टेक्स्ट ऑनलाइन एन्क्रिप्शन और डिक्रिप्शन टूल

                

              
                            
                
                

                  
ऑनलाइन SHA एन्क्रिप्शन

                

              
                          

          

          

        

      

    

    
    
    

    

        
अस्वीकरण: उपलब्ध कराए गए सभी संसाधन आंशिक रूप से इंटरनेट से हैं। यदि आपके कॉपीराइट या अन्य अधिकारों और हितों का कोई उल्लंघन होता है, तो कृपया विस्तृत कारण बताएं और कॉपीराइट या अधिकारों और हितों का प्रमाण प्रदान करें और फिर इसे ईमेल पर भेजें: [email protected]
          हम इसे आपके लिए यथाशीघ्र संभालेंगे।

        
Copyright© 2022 湘ICP备2022001581号-3