HTML DOM Style transformStyle प्रॉपर्टी

विवरण

HTML DOM Style transformStyle प्रॉपर्टी HTML दस्तावेज़ में किसी तत्व पर 2D या 3D ट्रांसफॉर्मेशन को प्राप्त और लागू करती है।

सिंटैक्स

transformStyle प्राप्त करना

object.style.transformStyle

transformStyle संशोधित करना

object.style.transformStyle = "value"

मान

यहां value निम्नलिखित हो सकते हैं:

उदाहरण

आइए HTML DOM Style transformStyle प्रॉपर्टी का एक उदाहरण देखें:

<!DOCTYPE html> <html> <head> <style> 
  body { 
    background: lightgreen; 
    height: 100vh; 
    text-align: center; 
  } 
  .outer-box { 
    position: relative; 
    height: 200px; 
    width: 200px; 
    margin: 80px; 
    padding: 5px; 
    border: 2px solid black; 
  } 
  .inner-box1 { 
    padding: 50px; 
    position: absolute; 
    background-color: coral; 
    transform: rotateY(40deg); 
  } 
  .inner-box2 { 
    padding: 40px; 
    position: absolute; 
    background-color: lightblue; 
    transform: rotateY(60deg); 
  } 
  .btn { 
    background: #db133a; 
    border: none; 
    height: 2rem; 
    border-radius: 2px; 
    width: 40%; 
    display: block; 
    color: #fff; 
    outline: none; 
    cursor: pointer; 
    margin: 1rem auto; 
  } 
</style> </head> <body> 
<h1>DOM Style transformStyle प्रॉपर्टी उदाहरण</h1> 
<div class="outer-box">Outer Box 
  <div class="inner-box1">Inner Box1 
    <div class="inner-box2">Inner Box2</div> 
  </div> 
</div> 
<button onclick="add()" class="btn">transformStyle सेट करें</button> 
<script> 
  function add() { 
    document.querySelector(".inner-box1").style.transformStyle = "preserve-3d"; 
  } 
</script> </body> </html>

आउटपुट

यह निम्नलिखित आउटपुट उत्पन्न करेगा:

"transformStyle सेट करें" बटन पर क्लिक करके Inner Box 1 पर ट्रांसफॉर्म स्टाइल लागू करें: