सीएसएस ट्रांसफॉर्म के साथ तिरछापन हासिल करना: दोनों तरफ तिरछा करना

प्रदान की गई छवि एक दिलचस्प तिरछा प्रभाव दिखाती है जो एक तत्व के दोनों कोनों को कोण बनाती है। सीएसएस परिवर्तन का उपयोग करके इस प्रभाव को फिर से बनाने के लिए, इन चरणों का पालन करें:

परिप्रेक्ष्य तिरछा लागू करना:

परिप्रेक्ष्य जोड़ने के लिए, निम्नलिखित सीएसएस संपत्ति का उपयोग करें:

transform: perspective(distance) rotateY(angle);

परिप्रेक्ष्य दूरी निर्धारित करने के लिए "दूरी" को एक मान से बदलें (उच्च मान एक दूर का परिप्रेक्ष्य बनाते हैं)। "कोण" को वांछित घूर्णन कोण (इस मामले में 45 डिग्री) से बदलें।

उदाहरण सीएसएस:

.red-box {
  background-color: red;
  transform: perspective(600px) rotateY(45deg);
}

HTML Code:

किसी तत्व पर तिरछा लागू करने के लिए, निम्न वर्ग जोड़ें:

बाहरी संसाधन से उदाहरण:

प्रदान किया गया सीएसएस और HTML कोड http://desandro.github.com/3dtransforms/docs से लिया गया है /perspective.html. यह वेबसाइट परिप्रेक्ष्य परिवर्तनों का उपयोग करने पर और उदाहरण और दस्तावेज़ीकरण प्रदान करती है।