CSS ट्रांसलेट प्रतियोगिता

रोजी और उपयोग

translate गुण एलिमेंट को स्थान को बदलने की अनुमति देता है。

translate गुण एलिमेंट को दो आयामी जीवनाश्म में x और y अक्ष कोणीय निर्देशांक निर्धारित करता है। आप अक्ष कोणीय निर्देशांक को निर्धारित करके तीन आयामी जीवनाश्म में स्थान को बदल सकते हैं。

कोणीय निर्देशांक केवल x अक्ष कोणीय निर्देशांक, x और y अक्ष कोणीय निर्देशांक, या x, y और z अक्ष कोणीय निर्देशांक के रूप में दिए जा सकते हैं。

बेहतर समझने के लिए translate गुण, कृपया देखेंडिमो。

सुझाव:z अक्ष गुण को प्रभावी बनाने के लिए, आपको CSS perspective गुण के लिए एक मूल्य निर्धारित करना होगा。

ध्यान दें:एलिमेंट को पंक्तिबद्ध करने के लिए एक अन्य तकनीक यह है कि आप इसके साथ एक बैग ले जाएं CSS ट्रांसलेट() फ़ंक्शन इस पृष्ठ के CSS transform गुण का कहना एक आसान और सीधा तरीका है जिससे एलिमेंट को पंक्तिबद्ध किया जा सकता है。

उदाहरण

उदाहरण 1

एलिमेंट का स्थान बदलें:

div {
  translate: 100px 20px;
}

स्वयं प्रयोग करें

उदाहरण 2

जब आप z अक्ष को सेट करते हैं translate गुण को पिता एलिमेंट पर भी सेट करना चाहिए perspective गुण, हम तभी कोई प्रभाव देख सकते हैं जब:

DIV1 {
  perspective: 200px;
}
DIV2 {
  translate: 50px 50px 50px;
}

स्वयं प्रयोग करें

CSS व्याकरण

translate: x-axis y-axis z-axis|initial|inherit;

गुण मूल्य

मूल्य वर्णन
x-axis

x अक्ष पर स्थिति निर्धारित करता है। संभावित मूल्य:

  • लंबाई
  • प्रतिशत
y-axis

y अक्ष पर स्थिति निर्धारित करता है। संभावित मूल्य:

  • लंबाई
  • प्रतिशत
z-axis

z अक्ष पर स्थिति निर्धारित करता है। संभावित मूल्य:

  • लंबाई
  • प्रतिशत
initial इस गुण को उसके मूलभूत मूल्य पर सेट करें। देखें: initial。
inherit इस गुण को उसके पिता एलिमेंट से विरासत करें। देखें: inherit。

तकनीकी विवरण

मूलभूत मूल्य: none
विरासत करने की क्षमता: नहीं
एनिमेशन निर्माण: समर्थन करता है। देखें:एनिमेशन संबंधी गुण。
संस्करण: CSS3
JavaScript व्याकरण: object.style.translate="10px 20px"

ब्राउज़र समर्थन

तालिका में नंबर इस गुण को पूरी तरह से समर्थन देने वाले पहले ब्राउज़र का संस्करण के रूप में प्रकट होते हैं。

च्रोम एज फायरफॉक्स सफारी ओपेरा
104 104 72 14.1 90

संबंधित पृष्ठ

CSS शिक्षा:CSS 2D ट्रांसफॉर्म

CSS शिक्षा:CSS 3D ट्रांसफॉर्म

CSS संदर्भ:CSS scale गुण

CSS संदर्भ:CSS rotate गुण

CSS संदर्भ:CSS perspective गुण