CSS 3D ट्रांसफॉर्म

CSS 3D ट्रांसफॉर्म

CSS 3D ट्रांसफॉर्मेशन का समर्थन भी करता है。

कृपया नीचे दिए एलिमेंट पर माउस को लगाएं, ताकि आप 2D और 3D ट्रांसफॉर्मेशन के बीच का अंतर देख सकें:

2D रोटेट
2D रोटेट

3D रोटेट

  • transform

इस चैप्टर में, आपको नीचे दिए गए CSS गुणों को सीखना होगा:

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

गुण इस पटल में की गई संख्याएं उस ब्राउज़र के पहले संस्करण को संदर्भित करती हैं जो इस गुण को पूरी तरह से समर्थित करता है。 IE Firefox Safari Opera
transform 36.0 10.0 16.0 9.0 23.0

CSS 3D ट्रांसफॉर्मेशन तरीका

CSS के माध्यम से transform गुण, आपको नीचे दिए गए 3D ट्रांसफॉर्मेशन तरीकों का उपयोग कर सकते हैं:

  • rotateX()
  • rotateY()
  • rotateZ()

rotateX() तरीका

रोटेट एक्स

rotateX() तरीका एक तत्व को X अक्ष के चारों ओर निर्धारित दूरी में घूमाता है:

उदाहरण

#myDiv {
  transform: rotateX(150deg);
}

खुद साफ़ी प्रयोग करें

rotateY() तरीका

रोटेट वाई

rotateY() तरीका एक तत्व को Y अक्ष के चारों ओर निर्धारित दूरी में घूमाता है:

उदाहरण

#myDiv {
  transform: rotateY(130deg);
}

खुद साफ़ी प्रयोग करें

rotateZ() तरीका

rotateZ() तरीका एक तत्व को Z अक्ष के चारों ओर निर्धारित दूरी में घूमाता है:

उदाहरण

#myDiv {
  transform: rotateZ(90deg);
}

खुद साफ़ी प्रयोग करें

CSS ट्रांसफॉर्मेशन गुण

नीचे दिए गए पटल में सभी 3D ट्रांसफॉर्मेशन गुण शामिल हैं:

गुण वर्णन
transform तत्व पर 2D या 3D ट्रांसफॉर्मेशन लगाता है。
transform-origin ट्रांसफॉर्म किए गए तत्व की स्थिति को बदलने की अनुमति देता है。
transform-style घुमाया गया तत्व को 3D स्पेस में कैसे दिखाया जाएगा, इसे निर्धारित करता है。
perspective 3D तत्व के पर्स्पेक्टिव असर को निर्धारित करता है。
perspective-origin 3D तत्व के नीचे की स्थिति को निर्धारित करता है。
backface-visibility तत्व को स्क्रीन के दूसरी ओर देखने तभी दिखाने को परिभाषित करता है。

CSS 3D ट्रांसफॉर्मेशन तरीका

तरीका वर्णन
matrix3d(n,n,n,n,n,n,
n,n,n,n,n,n,n,n,n,n)		 3D ट्रांसफॉर्मेशन को परिभाषित करता है, जिसमें 16 मानों वाली 4x4 मैट्रिक्स का उपयोग किया जाता है。
translate3d(x,y,z) 3D ट्रांसफॉर्मेशन को परिभाषित करता है。
translateX(x) 3D ट्रांसफॉर्मेशन को परिभाषित करता है, जिसमें केवल X अक्ष के मान का उपयोग किया जाता है。
translateY(y) 3D ट्रांसफॉर्मेशन को परिभाषित करता है, जिसमें केवल Y अक्ष के मान का उपयोग किया जाता है。
translateZ(z) 3D ट्रांसफॉर्मेशन को परिभाषित करता है, जिसमें केवल Z अक्ष के मान का उपयोग किया जाता है。
scale3d(x,y,z) 3D तापमान ट्रांसफॉर्मेशन को परिभाषित करता है。
scaleX(x) 3D तापमान ट्रांसफॉर्मेशन को परिभाषित करता है, जिसमें X अक्ष का मान दिया गया है。
scaleY(y) 3D तापमान ट्रांसफॉर्मेशन को परिभाषित करता है, जिसमें Y अक्ष का मान दिया गया है。
scaleZ(z) 3D तापमान ट्रांसफॉर्मेशन को परिभाषित करता है, जिसमें Z अक्ष का मान दिया गया है。
rotate3d(x,y,z,angle) 3D रोटेशन को परिभाषित करें。
rotateX(angle) X अक्ष पर 3D रोटेशन को परिभाषित करें。
rotateY(angle) Y अक्ष पर 3D रोटेशन को परिभाषित करें。
rotateZ(angle) Z अक्ष पर 3D रोटेशन को परिभाषित करें。
perspective(n) 3D ट्रांसफॉर्म एलिमेंट के पर्स्पेक्टिव व्यू को परिभाषित करें。