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

CSS3 के साथ z- अक्ष का उपयोग करके तत्व को घुमाएं

<घंटा/>

CSS3 के साथ z-अक्ष का उपयोग करके तत्व को बदलने के लिए रोटेटजेड (कोण) विधि का उपयोग करें -

उदाहरण

<html>
   <head>
      <style>
         div {
            width: 200px;
            height: 100px;
            background-color: pink;
            border: 1px solid black;
         }
         div#zDiv {
            -webkit-transform: rotateZ(90deg);
            /* Safari */
            transform: rotateZ(90deg);
            /* Standard syntax */
         }
      </style>
   </head>
   <body>
      <p>rotate Z axis</p>
      <div id = "zDiv">
         tutorials point.com.
      </div>
   </body>
</html>

आउटपुट

CSS3 के साथ z- अक्ष का उपयोग करके तत्व को घुमाएं


  1. CSS3 का उपयोग करके छवि कंट्रास्ट को समायोजित करना

    CSS में इमेज कंट्रास्ट सेट करने के लिए, फ़िल्टर कंट्रास्ट (%) का उपयोग करें। याद रखें, मान 0 छवि को काला बनाता है, 100% मूल छवि और डिफ़ॉल्ट के लिए है। बाकी, आप अपनी पसंद का कोई भी मान सेट कर सकते हैं, लेकिन 100% से ऊपर के मान छवि को अधिक कंट्रास्ट के साथ बनाएंगे। उदाहरण आइए अब CSS3 के साथ इमेज कंट्

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

    2डी ट्रांस्फ़ॉर्म का उपयोग एलिमेंट स्ट्रक्चर को ट्रांसलेट, रोटेट, स्केल और स्क्यू के रूप में फिर से बदलने के लिए किया जाता है। कुछ 2D ट्रांसफ़ॉर्म फ़ंक्शन निम्नलिखित हैं - क्रमांक मूल्य और विवरण 1 मैट्रिक्स(एन,एन,एन,एन,एन,एन) छह मानों के साथ मैट्रिक्स रूपांतरण को परिभाषित करने के लिए प्रयुक

  1. 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)