Computer >> कंप्यूटर ट्यूटोरियल >  >> प्रोग्रामिंग >> CSS

CSS3 से एलिमेंट को x-axis पर ट्रांसफॉर्म करें


translateX() मेथड

एलिमेंट को x-axis पर ट्रांसफॉर्म करने के लिए translateX(x) मेथड का उपयोग करें।

सिंटैक्स

translateX(x)

यहां, x: ट्रांसलेटिंग वेक्टर का abscissa दर्शाने वाली लंबाई।

उदाहरण

div {
  width: 40px;
  height: 40px;
  background-color: black;
}
.trans {
  transform: translateX(20px);
  background-color: orange;
}

  1. CSS3 का उपयोग करके इमेज कंट्रास्ट एडजस्ट करना CSS3 का उपयोग करके इमेज कंट्रास्ट एडजस्ट करना

    फिल्टर कंट्रास्ट() फंक्शन CSS में इमेज कंट्रास्ट सेट करने के लिए filter: contrast(%) का उपयोग करें। मानों की व्याख्या: 0%: इमेज पूरी तरह काली (ग्रेस्केल काला) 100%: मूल इमेज (डिफ़ॉल्ट) 100% से अधिक: अधिक कंट्रास्ट (गहरे रंग गहरे, चमकीले रंग चमकीले) 100% से कम: कम कंट्रास्ट (धुंधला/फीका प्

  1. CSS3 2D ट्रांसफॉर्म फंक्शन्स के साथ काम करना CSS3 2D ट्रांसफॉर्म फंक्शन्स के साथ काम करना

    2D ट्रांसफॉर्म्स का उपयोग एलिमेंट स्ट्रक्चर को ट्रांसलेट, रोटेट, स्केल और स्क्यू करने के लिए किया जाता है।निम्न कुछ 2D ट्रांसफॉर्म फंक्शन्स हैं -क्र.सं.मान और विवरण1matrix(n,n,n,n,n,n)छह मानों के साथ मैट्रिक्स ट्रांसफॉर्म्स परिभाषित करता है2translate(x,y)x-axis और y-axis के साथ एलिमेंट को ट्रांसफॉर्

  1. CSS3 3D ट्रांसफॉर्म फंक्शन्स के साथ काम करना CSS3 3D ट्रांसफॉर्म फंक्शन्स के साथ काम करना

    3D ट्रांसफॉर्म्स के साथ, हम एलिमेंट को x-axis, y-axis और z-axis पर मूव कर सकते हैं। CSS3 3D ट्रांसफॉर्म के कुछ तरीके निम्न हैं -3D ट्रांसफॉर्म्स को कॉल करने के लिए नीचे दिए गए मेथड्स का उपयोग किया जाता है -क्र.सं.मान और विवरण1matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n)मैट्रिक्स के 16 मानों का उपयोग कर