CSS3 के 3D ट्रांसफ़ॉर्म फ़ंक्शंस के साथ कार्य करना

<घंटा/>

3डी ट्रांस्फ़ॉर्म का उपयोग करके, हम तत्व को x-अक्ष, y-अक्ष और z-अक्ष में स्थानांतरित कर सकते हैं। CSS3 3D Transform के कुछ तरीके निम्नलिखित हैं -

नीचे दी गई विधियों का उपयोग 3D रूपांतरणों को कॉल करने के लिए किया जाता है -

<टेबल> <थहेड> क्रमांक मूल्य और विवरण 1 matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n)
मैट्रिक्स के 16 मानों का उपयोग करके तत्व को बदलने के लिए प्रयुक्त होता है
2 translate3d(x,y,z)
एक्स-अक्ष, वाई-अक्ष और जेड-अक्ष का उपयोग करके तत्व को बदलने के लिए प्रयुक्त होता है
3 अनुवादX(x)
एक्स-अक्ष का उपयोग करके तत्व को बदलने के लिए प्रयुक्त होता है
4 अनुवादY(y)
y-अक्ष का उपयोग करके तत्व को रूपांतरित करने के लिए प्रयुक्त होता है
5 अनुवादZ(z)
y-अक्ष का उपयोग करके तत्व को रूपांतरित करने के लिए प्रयुक्त होता है

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>

आउटपुट

उपरोक्त कोड निम्न आउटपुट उत्पन्न करेगा -

CSS3 के 3D ट्रांसफ़ॉर्म फ़ंक्शंस के साथ कार्य करना