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

CSS3 में 2D ट्रांसफॉर्म्स


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

निम्नलिखित तालिका में 2D ट्रांसफॉर्म्स में उपयोग किए जाने वाले सामान्य मान शामिल हैं:

क्रमांक
मान और विवरण
1
matrix(n,n,n,n,n,n)
छह मानों के साथ मैट्रिक्स ट्रांसफॉर्म्स परिभाषित करता है
2
translate(x,y)
x-axis और y-axis के साथ एलिमेंट को ट्रांसफॉर्म करता है
3
translateX(n)
x-axis के साथ एलिमेंट को ट्रांसफॉर्म करता है
4
translateY(n)
y-axis के साथ एलिमेंट को ट्रांसफॉर्म करता है
5
scale(x,y)
एलिमेंट की चौड़ाई और ऊंचाई बदलता है
6
scaleX(n)
एलिमेंट की चौड़ाई बदलता है
7
scaleY(n)
एलिमेंट की ऊंचाई बदलता है
8
rotate(angle)
कोण के आधार पर एलिमेंट को घुमाता है
9
skewX(angle)
x-axis के साथ स्क्यू ट्रांसफॉर्म्स परिभाषित करता है
10
skewY(angle)
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 मानों का उपयोग कर

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

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

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

    CSS3 में कीफ्रेम एनिमेशन बनाने के लिए, व्यक्तिगत कीफ्रेम परिभाषित करें। कीफ्रेम्स CSS3 में इंटरमीडिएट एनिमेशन स्टेप्स को कंट्रोल करेंगे।CSS3 में कीफ्रेम्स परिभाषित करने का कोड निम्न है -उदाहरण<!DOCTYPE html> <html> <head> <style> body {    font-family: "Segoe U