CSS 3D ट्रांसफ़ॉर्म
CSS 3D ट्रांसफ़ॉर्म
CSS 3D ट्रांसफॉर्मेशन को भी सपोर्ट करता है।
2D और 3D रूपांतरण के बीच अंतर देखने के लिए नीचे दिए गए तत्वों पर माउस ले जाएँ:
2डी घुमाएँ
3डी घुमाएँ
इस अध्याय में आप निम्नलिखित सीएसएस संपत्ति के बारे में जानेंगे:
transform
ब्राउज़र समर्थन
तालिका में संख्याएं पहले ब्राउज़र संस्करण को निर्दिष्ट करती हैं जो पूरी तरह से संपत्ति का समर्थन करता है।
| Property | |||||
|---|---|---|---|---|---|
| transform | 36.0 |
10.0 |
16.0 |
9.0 |
23.0 |
CSS 3D ट्रांसफॉर्म मेथड्स
CSS transformसंपत्ति के साथ आप निम्नलिखित 3D रूपांतरण विधियों का उपयोग कर सकते हैं:
rotateX()rotateY()rotateZ()
रोटेटएक्स () विधि
यह rotateX()विधि किसी तत्व को उसके X-अक्ष के चारों ओर दी गई डिग्री पर घुमाती है:
उदाहरण
#myDiv
{
transform: rotateX(150deg);
}
रोटेटवाई () विधि
यह rotateY()विधि किसी तत्व को उसके Y-अक्ष के चारों ओर एक निश्चित डिग्री पर घुमाती है:
उदाहरण
#myDiv
{
transform: rotateY(150deg);
}
रोटेटजेड () विधि
rotateZ()विधि किसी तत्व को उसके Z- अक्ष के चारों ओर एक निश्चित डिग्री पर घुमाती है :
उदाहरण
#myDiv
{
transform: rotateZ(90deg);
}
सीएसएस रूपांतरण गुण
निम्न तालिका सभी 3D ट्रांसफ़ॉर्म गुणों को सूचीबद्ध करती है:
| Property | Description |
|---|---|
| transform | Applies a 2D or 3D transformation to an element |
| transform-origin | Allows you to change the position on transformed elements |
| transform-style | Specifies how nested elements are rendered in 3D space |
| perspective | Specifies the perspective on how 3D elements are viewed |
| perspective-origin | Specifies the bottom position of 3D elements |
| backface-visibility | Defines whether or not an element should be visible when not facing the screen |
CSS 3D ट्रांसफ़ॉर्म मेथड्स
| Function | Description |
|---|---|
| matrix3d (n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n) |
Defines a 3D transformation, using a 4x4 matrix of 16 values |
| translate3d(x,y,z) | Defines a 3D translation |
| translateX(x) | Defines a 3D translation, using only the value for the X-axis |
| translateY(y) | Defines a 3D translation, using only the value for the Y-axis |
| translateZ(z) | Defines a 3D translation, using only the value for the Z-axis |
| scale3d(x,y,z) | Defines a 3D scale transformation |
| scaleX(x) | Defines a 3D scale transformation by giving a value for the X-axis |
| scaleY(y) | Defines a 3D scale transformation by giving a value for the Y-axis |
| scaleZ(z) | Defines a 3D scale transformation by giving a value for the Z-axis |
| rotate3d(x,y,z,angle) | Defines a 3D rotation |
| rotateX(angle) | Defines a 3D rotation along the X-axis |
| rotateY(angle) | Defines a 3D rotation along the Y-axis |
| rotateZ(angle) | Defines a 3D rotation along the Z-axis |
| perspective(n) | Defines a perspective view for a 3D transformed element |