Computer >> कंप्यूटर >  >> प्रोग्रामिंग >> HTML

एचटीएमएल डोम स्टाइल ट्रांसफॉर्म स्टाइल प्रॉपर्टी


HTML DOM स्टाइल ट्रांसफॉर्म स्टाइल प्रॉपर्टी रिटर्न करती है और HTML डॉक्यूमेंट में किसी एलीमेंट में 2D या 3D ट्रांसफॉर्मेशन लागू करती है।

सिंटैक्स

निम्नलिखित वाक्य रचना है -

  • रिटर्निंग ट्रांसफॉर्म स्टाइल

object.style.transformStyle
  • परिवर्तन शैली को संशोधित करना

object.style.transformStyle = “value”

मान

यहाँ, मान हो सकता है -

<वें शैली ="चौड़ाई:84.4217%; पाठ-संरेखण:केंद्र;">स्पष्टीकरण
मान
उत्तराधिकारी यह इस गुण मान को इसके मूल तत्व से प्राप्त करता है।
आरंभिक इसने इस गुण मान को उसके डिफ़ॉल्ट मान पर सेट किया।
फ्लैट यह चाइल्ड एलिमेंट को उसकी 3D स्थिति को सुरक्षित न रखने के लिए सेट करता है।
संरक्षित-3d यह चाइल्ड एलिमेंट को उसकी 3D स्थिति बनाए रखने के लिए सेट करता है।

उदाहरण

आइए HTML DOM स्टाइल ट्रांसफॉर्म स्टाइल प्रॉपर्टी का एक उदाहरण देखें -

<!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 Property Example</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">Set transformStyle</button>
<script>
   function add() {
      document.querySelector(".inner-box1").style.transformStyle = "preserve-3d";
   }
</script>
</body>
</html>

आउटपुट

यह निम्नलिखित आउटपुट देगा -

एचटीएमएल डोम स्टाइल ट्रांसफॉर्म स्टाइल प्रॉपर्टी

ट्रांसफॉर्म स्टाइल सेट करें . पर क्लिक करें इनर बॉक्स 1 पर ट्रांसफ़ॉर्म स्टाइल लागू करने के लिए बटन -

एचटीएमएल डोम स्टाइल ट्रांसफॉर्म स्टाइल प्रॉपर्टी


  1. एचटीएमएल डोम स्टाइल ट्रांसफॉर्मऑरिजिन प्रॉपर्टी

    HTML DOM स्टाइल ट्रांसफॉर्मऑरिजिन प्रॉपर्टी लौटाती है और HTML दस्तावेज़ के किसी तत्व में 2D या 3D ट्रांसफ़ॉर्मेशन लागू करती है। सिंटैक्स निम्नलिखित वाक्य रचना है - रिटर्निंग ट्रांसफॉर्मऑरिजिन object.style.transformOrigin ट्रांसफॉर्म ऑरिजिन को संशोधित करना object.style.transformOrigin = &l

  1. HTML DOM स्टाइल प्रॉपर्टी को कोट करता है

    HTML DOM शैली प्रॉपर्टी रिटर्न को कोट करती है और HTML दस्तावेज़ में कोटेशन संलग्न करने के लिए उद्धरण चिह्नों के प्रकार को संशोधित करती है। सिंटैक्स निम्नलिखित वाक्य रचना है - रिटर्निंग कोट्स object.style.quotes उद्धरण संशोधित करना object.style.quotes = “value” मान यहाँ, मान ह

  1. एचटीएमएल डोम स्टाइल टेक्स्टट्रांसफॉर्म संपत्ति

    DOM स्टाइल टेक्स्टट्रांसफॉर्म प्रॉपर्टी रिटर्न करती है और HTML डॉक्यूमेंट में किसी एलीमेंट के टेक्स्ट पर ट्रांसफॉर्मेशन लागू करती है। सिंटैक्स निम्नलिखित वाक्य रचना है - रिटर्निंग टेक्स्टट्रांसफॉर्म object.style.textTransform टेक्स्ट ट्रांसफॉर्म को संशोधित करना object.style.textTransform