3D ट्रांसफॉर्म्स के साथ, हम एलिमेंट को x-axis, y-axis और z-axis पर मूव कर सकते हैं। CSS3 3D ट्रांसफॉर्म के कुछ तरीके निम्न हैं -
3D ट्रांसफॉर्म्स को कॉल करने के लिए नीचे दिए गए मेथड्स का उपयोग किया जाता है -
| क्र.सं. | मान और विवरण |
|---|---|
| 1 | matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n) मैट्रिक्स के 16 मानों का उपयोग करके एलिमेंट को ट्रांसफॉर्म करता है |
| 2 | translate3d(x,y,z) x-axis, y-axis और z-axis का उपयोग करके एलिमेंट को ट्रांसफॉर्म करता है |
| 3 | translateX(x) x-axis का उपयोग करके एलिमेंट को ट्रांसफॉर्म करता है |
| 4 | translateY(y) y-axis का उपयोग करके एलिमेंट को ट्रांसफॉर्म करता है |
| 5 | translateZ(z) z-axis का उपयोग करके एलिमेंट को ट्रांसफॉर्म करता है |
CSS3 3D ट्रांसफॉर्म फंक्शन्स का कोड निम्न है -
उदाहरण
<!DOCTYPE html> <html> <head> <style> body { font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; } .container { display: inline-block; width: 200px; height: 200px; border: 1px solid #CCC; margin-left: 20px; } .rotateX { width: 100%; height: 100%; background: rgb(52, 0, 241); transform: perspective(600px) rotateX(85deg); } .rotateY { width: 100%; height: 100%; background: rgb(55, 0, 255); transform: perspective(600px) rotateY(75deg); } .translateZ{ width: 100%; height: 100%; background: rgb(55, 0, 255); transform: perspective(600px) translateZ(-200px); } </style> </head> <body> <h1>3D transform function example</h1> <div class="container"> <div class="rotateX"></div> </div> <div class="container"> <div class="rotateY"></div> </div> <div class="container"> <div class="translateZ"></div> </div> </body> </html>आउटपुट
उपरोक्त कोड निम्न आउटपुट उत्पन्न करेगा -
