CSS ट्रांसफॉर्म प्रभाव

परिभाषा और उपयोग

transform प्रतियोगिता एलिमेंट पर 2D या 3D ट्रांसफॉर्मेशन लगाती है। यह प्रतियोगिता हमें एलिमेंट को घुमाने, फैलाने, खिंचने या झुकाने की अनुमति देती है。

transform प्रतियोगिता को बेहतर समझने के लिए इसे देखेंप्रदर्शन。

और देखें:

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

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

HTML DOM संदर्भ पुस्तक:transform प्रतियोगिता

उदाहरण

div एलिमेंट को घुमाएं:

div
{
transform:rotate(7deg);
}

आप खुद सिफारिश करें

पृष्ठ के नीचे अधिक उदाहरण हैं。

CSS ग्रामातर

transform: none|transform-functions;

प्रतियोगिता मान

मान वर्णन परीक्षण
कोई भी नहीं ट्रांसफॉर्मेशन को परिभाषित न करें。 परीक्षण
matrix(n,n,n,n,n,n) 2D ट्रांसफॉर्मेशन को परिभाषित करें, छह मान की मैट्रिक्स का उपयोग करके。 परीक्षण
matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n) 3D ट्रांसफॉर्मेशन को परिभाषित करें, 4x4 मैट्रिक्स के 16 मान का उपयोग करके。
translate(x,y) 2D ट्रांसफॉर्म निर्धारित करें। परीक्षण
translate3d(x,y,z) 3D ट्रांसफॉर्म निर्धारित करें।
translateX(x) केवल X अक्ष के मान का उपयोग करके ट्रांसफॉर्म निर्धारित करें। परीक्षण
translateY(y) केवल Y अक्ष के मान का उपयोग करके ट्रांसफॉर्म निर्धारित करें। परीक्षण
translateZ(z) 3D ट्रांसफॉर्म निर्धारित करें, केवल Z अक्ष के मान का उपयोग करें।
scale(x,y) 2D स्केलिंग ट्रांसफॉर्म निर्धारित करें। परीक्षण
scale3d(x,y,z) 3D स्केलिंग ट्रांसफॉर्म निर्धारित करें।
scaleX(x) X अक्ष के मान को सेट करके स्केलिंग ट्रांसफॉर्म निर्धारित करें। परीक्षण
scaleY(y) Y अक्ष के मान को सेट करके स्केलिंग ट्रांसफॉर्म निर्धारित करें। परीक्षण
scaleZ(z) Z अक्ष के मान को सेट करके 3D स्केलिंग ट्रांसफॉर्म निर्धारित करें।
rotate(angle) 2D घुमाव निर्धारित करें, दर्जे में कोण निर्धारित करें। परीक्षण
rotate3d(x,y,z,angle) 3D घुमाव निर्धारित करें।
rotateX(angle) X अक्ष पर 3D घुमाव निर्धारित करें। परीक्षण
rotateY(angle) Y अक्ष पर 3D घुमाव निर्धारित करें। परीक्षण
rotateZ(angle) Z अक्ष पर 3D घुमाव निर्धारित करें। परीक्षण
skew(x-angle,y-angle) X और Y अक्ष पर 2D झुकाव ट्रांसफॉर्म निर्धारित करें। परीक्षण
skewX(angle) X अक्ष पर 2D झुकाव ट्रांसफॉर्म निर्धारित करें। परीक्षण
skewY(angle) Y अक्ष पर 2D झुकाव ट्रांसफॉर्म निर्धारित करें। परीक्षण
perspective(n) 3D ट्रांसफॉर्म एलीमेंट के लिए परिप्रक्ष्ट दृश्य निर्धारित करें। परीक्षण

तकनीकी विवरण

मूलभूत मान: कोई भी नहीं
विरासतीयता: नहीं
संस्करण: CSS3
JavaScript व्याकरण: object.style.transform="rotate(7deg)"

अधिक उदाहरण

टेबल पर फेंके गए इमेज
इस उदाहरण में बोलीबैल इमेज को बनाने और इमेज को घुमाने के तरीके दिखाया गया है।

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

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

इसके पूर्व-विन्यास -webkit-、-moz- या -ms- के साथ की गई संख्याएं पहली संस्करण का प्रयोग करती हैं।

गुण च्रोम IE / एज फ़ायरफॉक्स सफारी ओपेरा
transform (2D) 36.0
4.0 -webkit-		 10.0
9.0 -ms-		 16.0
3.5 -moz-		 9.0
3.2 -webkit-		 23.0
15.0 -webkit-
10.5 -o-
transform (3D) 36.0
12.0 -webkit-		 12.0 10.0 9.0
4.0 -webkit-		 23.0
15.0 -webkit-