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

CSS3 में 2D रूपांतरित होता है

<घंटा/> <शरीर>

2डी ट्रांस्फ़ॉर्म का उपयोग एलिमेंट स्ट्रक्चर को ट्रांसलेट, रोटेट, स्केल और स्क्यू के रूप में फिर से बदलने के लिए किया जाता है।

निम्न तालिका में सामान्य मान शामिल हैं जो 2डी ट्रांसफ़ॉर्म में उपयोग किए जाते हैं

S.No
<वें शैली ="चौड़ाई:88.587%;">मान और विवरण
1
matrix(n,n,n,n,n,n)
छह मानों के साथ मैट्रिक्स रूपांतरण को परिभाषित करने के लिए प्रयुक्त होता है
2
अनुवाद करें(x,y)
एक्स-अक्ष और वाई-अक्ष के साथ तत्व को बदलने के लिए प्रयुक्त होता है
3
translateX(n)
एक्स-अक्ष के साथ तत्व को बदलने के लिए प्रयुक्त होता है
4
अनुवादY(n)
तत्व को y-अक्ष के साथ बदलने के लिए प्रयुक्त होता है
5
स्केल(x,y)
तत्व की चौड़ाई और ऊंचाई को बदलने के लिए उपयोग किया जाता है
6
स्केलएक्स(एन)
तत्व की चौड़ाई बदलने के लिए प्रयुक्त
7
स्केलY(n)
तत्व की ऊंचाई बदलने के लिए प्रयुक्त
8
>घुमाएं(कोण)
कोण के आधार पर तत्व को घुमाने के लिए प्रयुक्त होता है
9
>skewX(angle)
एक्स अक्ष के साथ तिरछा परिवर्तन को परिभाषित करने के लिए प्रयुक्त होता है
10
तिरछा (कोण)
वाई अक्ष के साथ तिरछा परिवर्तन को परिभाषित करने के लिए प्रयुक्त होता है

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

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

  1. CSS3 का उपयोग करके तत्वों का 2D परिवर्तन

    2डी ट्रांस्फ़ॉर्म का उपयोग एलिमेंट स्ट्रक्चर को ट्रांसलेट, रोटेट, स्केल और स्क्यू के रूप में फिर से बदलने के लिए किया जाता है। कुछ 2D ट्रांसफ़ॉर्म फ़ंक्शन निम्नलिखित हैं - क्रमांक मूल्य और विवरण 1 मैट्रिक्स(एन,एन,एन,एन,एन,एन) छह मानों के साथ मैट्रिक्स रूपांतरण को परिभाषित करने के लिए प्रयुक

  1. CSS3 में कीफ्रेम को परिभाषित करना

    CSS3 में कीफ़्रेम एनिमेशन बनाने के लिए, अलग-अलग कीफ़्रेम को परिभाषित करें। कीफ़्रेम CSS3 में मध्यवर्ती एनिमेशन चरणों को नियंत्रित करेंगे। CSS3 में मुख्य फ़्रेम को परिभाषित करने के लिए कोड निम्नलिखित है - उदाहरण <!DOCTYPE html> <html> <head> <style> body {    font-f