कोड

घूर्णन छवि हिंडोलाशीर्षक>

    शरीर {
        प्रदर्शन: फ्लेक्स;
        औचित्य-सामग्री: केंद्र;
        संरेखित-आइटम: केंद्र;
        ऊंचाई: 100vh;
        मार्जिन: 0;
        पृष्ठभूमि-रंग: #0d0d0d;
        ओवर फलो हिडेन;
        संक्रमण: पृष्ठभूमि-छवि 0.5s आसानी;
        पृष्ठभूमि-आकार: कवर;
        पृष्ठभूमि-स्थिति: केंद्र;

    }

    /*हिंडोला कंटेनर*/
    .हिंडोला {
        स्थिति: सापेक्ष;
        चौड़ाई: 130px;
        ऊंचाई: 130px;
        परिवर्तन-शैली: संरक्षित-3डी;
        परिप्रेक्ष्य: 1000px;
        संक्रमण: परिवर्तन 1एस;
    }

    /* छवि शैलियाँ */
    .कैरोसेल img {
        स्थिति: निरपेक्ष;
        ऊंचाई: 100%;
        चौड़ाई: 100%;
        /* चौड़ाई: 150px;
        ऊँचाई: 150px; */
        बॉर्डर-त्रिज्या: 10px;
        बॉक्स-छाया: 0 0 10पीएक्स आरजीबीए(255, 110, 199, 0.3);
        परिवर्तन-उत्पत्ति: केंद्र;
        संक्रमण: परिवर्तन 0.5s, फ़िल्टर 0.5s;
        अपारदर्शिता: 0.8;
    }

    /*प्रत्येक छवि को Y-अक्ष के चारों ओर रखें*/
    .कैरोसेल img:nth-child(1) { ट्रांसफॉर्म: रोटेटY(0deg) TranslateZ(150px); }
    .कैरोसेल img:nth-child(2) { ट्रांसफॉर्म: रोटेटY(72deg) TranslateZ(150px); }
    .कैरोसेल img:nth-child(3) { ट्रांसफॉर्म: रोटेटY(144डिग्री) ट्रांसलेशनZ(150px); }
    .कैरोसेल img:nth-child(4) { ट्रांसफॉर्म: रोटेटY(216deg) ट्रांसलेशनZ(150px); }
    .कैरोसेल img:nth-child(5) { ट्रांसफॉर्म: रोटेटY(288डिग्री) ट्रांसलेशनZ(150px); }

    /* नियंत्रण चिह्न*/
    .नियंत्रण {
        स्थिति: निरपेक्ष;
        निचला: 20px;
        बाएँ: 20px;
        प्रदर्शन: फ्लेक्स;
        गैप: 10px;
    }
    .नियंत्रण बटन {
        चौड़ाई: 40px;
        ऊंचाई: 40px;
        फ़ॉन्ट-आकार: 18px;
        सीमा: कोई नहीं;
        पृष्ठभूमि-रंग: #181616;
        रंग: #fff;
        कर्सर: सूचक;
        सीमा-त्रिज्या: 50%;
        संक्रमण: पृष्ठभूमि-रंग 0.3s;
    }
    .नियंत्रण बटन: होवर करें {
        पृष्ठभूमि-रंग: #555;
    }
शैली>