transform-origin प्रॉपर्टी

transform-origin प्रॉपर्टी उस बिंदु को निर्धारित करती है, जिसके सापेक्ष transform प्रॉपर्टी द्वारा परिभाषित एलिमेंट के ट्रांसफॉर्मेशन होंगे। डिफॉल्ट रूप से यह बिंदु - एलिमेंट का केंद्र होता है, और, उदाहरण के लिए, रोटेशन उसके केंद्र के सापेक्ष होगा। हालांकि, इस व्यवहार को बदला जा सकता है और एलिमेंट को उसकी भुजा, कोने या बिल्कुल बाहर स्थित किसी बिंदु के सापेक्ष घुमाया जा सकता है।

सिंटैक्स

cssसिलेक्टर {
  transform-origin: X-अक्ष Y-अक्ष Z-अक्ष;
}

Y और Z अक्षों के मान अनिवार्य नहीं हैं, उन्हें छोड़ा जा सकता है (वे डिफॉल्ट मान ले लेंगे)। Z अक्ष के साथ बिंदु का विस्थापन 3D ट्रांसफॉर्मेशन के लिए आवश्यक है।

X अक्ष के लिए मान

मान	विवरण
CSS यूनिट्स	मान कोई भी आकारों की यूनिट हो सकती हैं, जो एलिमेंट की बाईं सीमा से ट्रांसफॉर्मेशन केंद्र के ऑफसेट को निर्धारित करती हैं। सकारात्मक मान ट्रांसफॉर्मेशन केंद्र को दाईं ओर (एलिमेंट के अंदर) स्थानांतरित करता है, जबकि नकारात्मक मान - बाईं ओर (एलिमेंट के बाहर) एलिमेंट की बाईं सीमा के सापेक्ष स्थानांतरित करता है।
`left`	एलिमेंट की बाईं सीमा पर क्षैतिज रोटेशन बिंदु।
`right`	एलिमेंट की दाईं सीमा पर क्षैतिज रोटेशन बिंदु।
`center`	एलिमेंट के केंद्र में क्षैतिज रोटेशन बिंदु।

डिफॉल्ट मान: center.

Y अक्ष के लिए मान

मान	विवरण
CSS यूनिट्स	मान कोई भी आकारों की यूनिट हो सकती हैं, जो एलिमेंट की ऊपरी सीमा से ट्रांसफॉर्मेशन केंद्र के ऑफसेट को निर्धारित करती हैं। सकारात्मक मान ट्रांसफॉर्मेशन केंद्र को नीचे (एलिमेंट के अंदर) स्थानांतरित करता है, जबकि नकारात्मक मान - ऊपर (एलिमेंट के बाहर) एलिमेंट की ऊपरी सीमा के सापेक्ष स्थानांतरित करता है।
`top`	एलिमेंट की ऊपरी सीमा पर ऊर्ध्वाधर रोटेशन बिंदु।
`bottom`	एलिमेंट की निचली सीमा पर ऊर्ध्वाधर रोटेशन बिंदु।
`center`	एलिमेंट के केंद्र में ऊर्ध्वाधर रोटेशन बिंदु।

डिफॉल्ट मान: center.

Z अक्ष के लिए मान

मान	विवरण
CSS यूनिट्स	मान कोई भी आकारों की यूनिट हो सकती हैं, जो एलिमेंट के तल से ट्रांसफॉर्मेशन केंद्र के ऑफसेट को निर्धारित करती हैं। सकारात्मक मान इसे हमारी ओर (स्क्रीन के तल से दूर), और नकारात्मक मान हमसे दूर स्थानांतरित करता है।

मान

विवरण

CSS यूनिट्स

मान कोई भी आकारों की यूनिट हो सकती हैं, जो एलिमेंट के तल से ट्रांसफॉर्मेशन केंद्र के ऑफसेट को निर्धारित करती हैं। सकारात्मक मान इसे हमारी ओर (स्क्रीन के तल से दूर), और नकारात्मक मान हमसे दूर स्थानांतरित करता है।

डिफॉल्ट मान: 0px.

उदाहरण

अभी transform-origin प्रॉपर्टी का मान सेट नहीं है और ब्लॉक अपने केंद्र के सापेक्ष घूमेगा। प्रभाव देखने के लिए ब्लॉक पर माउस होवर करें:

html<div id="elem">lorem ipsum</div>

css#elem {
  border: 1px solid black;
  width: 100px;
  height: 50px;
}
#elem:hover {
  transform-origin: center center;
  transform: rotate(30deg);
}

Результат:

उदाहरण

और अब होवर करने पर ब्लॉक ऊपरी बाएं कोने के सापेक्ष घूमेगा:

html<div id="elem">lorem ipsum</div>

css#elem {
  border: 1px solid black;
  width: 100px;
  height: 50px;
}
#elem:hover {
  transform-origin: 0px 0px;
  transform: rotate(30deg);
}

Результат:

उदाहरण

और अब होवर करने पर ब्लॉक निचले दाएं कोने के सापेक्ष घूमेगा। इसके लिए ट्रांसफॉर्मेशन बिंदु को दाईं ओर 100% और नीचे 100% स्थानांतरित करना होगा (px में भी सेट किया जा सकता था, लेकिन एलिमेंट के आकार बदलने पर ट्रांसफॉर्मेशन बिंदु अपनी जगह पर रहता, इसलिए % में करना बेहतर है):

html<div id="elem">lorem ipsum</div>

css#elem {
  border: 1px solid black;
  width: 100px;
  height: 50px;
}
#elem:hover {
  transform-origin: 100% 100%;
  transform: rotate(30deg);
}

Результат:

उदाहरण

ब्लॉक को ऊपरी दाएं कोने के सापेक्ष घुमाएं:

html<div id="elem">lorem ipsum</div>

css#elem {
  border: 1px solid black;
  width: 100px;
  height: 50px;
}
#elem:hover {
  transform-origin: 100% 0%;
  transform: rotate(30deg);
}

Результат:

उदाहरण

ब्लॉक को बाईं भुजा के केंद्र के सापेक्ष घुमाएं। इसके लिए X अक्ष के लिए left सेट करें (रोटेशन बिंदु बाईं ओर होगा), और Y अक्ष के लिए - center (रोटेशन बिंदु ऊर्ध्वाधर रूप से केंद्र में होगा):

html<div id="elem">lorem ipsum</div>

css#elem {
  border: 1px solid black;
  width: 100px;
  height: 50px;
}
#elem:hover {
  transform-origin: left center;
  transform: rotate(30deg);
}

Результат:

उदाहरण

प्रॉपर्टी को केवल रोटेशन के लिए ही नहीं, बल्कि अन्य ट्रांसफॉर्मेशन के लिए भी सेट किया जा सकता है। आइए scale का उपयोग करके स्केल बढ़ाएं, ट्रांसफॉर्मेशन बिंदु को बाएं निचले कोने के रूप में निर्दिष्ट करते हुए:

html<div id="elem">lorem ipsum</div>

css#elem {
  border: 1px solid black;
  width: 100px;
  height: 50px;
}
#elem:hover {
  transform-origin: left bottom;
  transform: scale(1.5);
}

Результат:

उदाहरण

और अब ट्रांसफॉर्मेशन बिंदु को दाएं ऊपरी कोने के रूप में निर्दिष्ट करें:

html<div id="elem">lorem ipsum</div>

css#elem {
  border: 1px solid black;
  width: 100px;
  height: 50px;
}
#elem:hover {
  transform-origin: right top;
  transform: scale(1.5);
}

Результат:

उदाहरण

ट्रांसफॉर्मेशन बिंदु को एलिमेंट के बाहर भी सेट किया जा सकता है। अगले उदाहरण में, लाल ब्लॉक पर माउस होवर करने पर काला ब्लॉक उस बिंदु के सापेक्ष घूमेगा जो बाहर स्थित है:

html<div id="hover"></div>
<div id="elem"></div>

css#hover {
  border: 1px solid red;
  width: 50px;
  height: 50px;
}
#elem {
  border: 1px solid black;
  width: 100px;
  height: 50px;
  transition: transform 1s;
  transform-origin: -100px -100px;
}
#hover:hover + #elem {
  transform: rotate(30deg);
}

Результат: