सीएसएस का उपयोग करके अपने केंद्र से एक डिव का विस्तार करना

सीएसएस परिवर्तनों के दायरे में, कोई डिव तत्वों को उनके केंद्रीय अक्ष से शानदार ढंग से विस्तारित करने की कल्पना कर सकता है , शीर्ष और बाएँ कोने से विस्तार के डिफ़ॉल्ट व्यवहार के बजाय। हालाँकि, यह वांछित प्रभाव जावास्क्रिप्ट के बिना एक चुनौती प्रस्तुत करता है। सूत्र. तकनीक में लक्ष्य आकार और प्रारंभिक आकार के बीच अंतर की गणना करना और परिणाम को दो से विभाजित करना शामिल है। यह मान तब संक्रमण के दौरान एक नकारात्मक मार्जिन समायोजन के रूप में लागू किया जाता है।

अनुकूलन विकल्प:

वांछित व्यवहार के आधार पर, तीन मुख्य विकल्प उपलब्ध हैं:

विकल्प 1: स्थान का संरक्षण

यह विकल्प आसपास आरक्षित स्थान के भीतर div का विस्तार करता है, जिससे आसपास के तत्व अप्रभावित रहते हैं।

#square { -वेबकिट-संक्रमण: चौड़ाई 1एस, ऊंचाई 1एस, मार्जिन 1एस; संक्रमण: चौड़ाई 1s, ऊंचाई 1s, मार्जिन 1s; } #स्क्वायर: होवर { मार्जिन: 55px; /* प्रारंभिक मार्जिन के रूप में गणना की गई - ((चौड़ाई परिवर्तन और ऊंचाई परिवर्तन)/2) */ }

#square {
    -webkit-transition: width 1s, height 1s, margin 1s;
    transition: width 1s, height 1s, margin 1s;
}
#square:hover {
    margin: 55px; /* calculated as initial margin - ((width change and height change)/2) */
}

#वर्ग { -वेबकिट-संक्रमण: चौड़ाई 1एस, ऊंचाई 1एस, मार्जिन 1एस; संक्रमण: चौड़ाई 1s, ऊंचाई 1s, मार्जिन 1s; } #स्क्वायर: होवर { मार्जिन: -50px; /* की गणना 0 के रूप में की जाती है - ((चौड़ाई परिवर्तन और ऊंचाई परिवर्तन)/2) */ }

#square {
    -webkit-transition: width 1s, height 1s, margin 1s;
    transition: width 1s, height 1s, margin 1s;
}
#square:hover {
    margin: -50px; /* calculated as 0 - ((width change and height change)/2) */
}

#square { -वेबकिट-संक्रमण: चौड़ाई 1s, ऊँचाई 1s, शीर्ष 1s, बाएँ 1s, मार्जिन 1s; संक्रमण: चौड़ाई 1s, ऊँचाई 1s, शीर्ष 1s, बाएँ 1s, मार्जिन 1s; } #स्क्वायर: होवर { शीर्ष: -50px; /* प्रारंभिक शीर्ष के रूप में गणना की गई - ((नई ऊंचाई - प्रारंभिक ऊंचाई)/2) */ बाएँ: -50px; /* प्रारंभिक बाएँ के रूप में गणना की गई - ((नई चौड़ाई - प्रारंभिक चौड़ाई)/2) */ मार्जिन-राइट: -50px; मार्जिन-बॉटम: -50px; }

ये गणना वर्ग divs पर लागू होती हैं। गैर-वर्ग तत्वों के लिए, मार्जिन समायोजन की गणना वांछित आनुपातिक आकार के आधार पर थोड़ी भिन्न हो सकती है।