क्या केवल मूल तत्व में स्कू का उपयोग करने का कोई तरीका है? मुझे मास्क के रूप में 'हीरा' जैसे कुछ बनाने की आवश्यकता है और बच्चे के तत्व प्रभावित नहीं हो सकते हैं। मास्क के रूप में पीएनजी का उपयोग करने के लिए, इस मामले में, कोई रास्ता नहीं है। अग्रिम धन्यवाद!केवल मूल तत्व में स्कू का उपयोग कैसे करें?
कोई भी transform संपत्ति उस तत्व को प्रभावित करती है जो और पर उनके सभी बच्चों पर लागू होती है।
तो skew का एकमात्र तरीका एक "मूल" तत्व है, जिसमें कोई बच्चा नहीं है (यानी .: यह माता-पिता भी नहीं हो सकता है!)।
क्या परिणामस्वरूप आप क्या प्राप्त करना चाहते हैं इस बारे में विस्तार से विस्तार करने का प्रयास कर सकते हैं?
skew(), सभी परिवर्तन गुणों की तरह हमेशा बाल तत्वों को प्रभावित करता है। आप एक ही स्थिति में दो एचटीएमएल ब्लॉक का उपयोग करने की कोशिश कर सकते हैं, एक skew() और दूसरे के साथ सामग्री के साथ।
इसके अलावा, अगर आप सिर्फ एक हीरा, पैमाने के साथ एक आयताकार बॉक्स() चाहते हैं और बारी बारी से() पर्याप्त होना चाहिए, लेकिन फिर कोई बच्चों के साथ।
और यदि आप उस हीरे को मास्क के रूप में चाहते हैं, तो मुझे पूरा यकीन है कि हीरे में मौजूद हिस्सों को प्रस्तुत करना आसान होगा। हीरे के बाहरी हिस्सों को प्रस्तुत करना मुश्किल नहीं होना चाहिए, आखिरकार, वे केवल आयताकार त्रिभुज हैं।
यह वास्तव में आसान है, आपको केवल बच्चों के लिए चीज़ को अनजान करने की आवश्यकता है। Unskew का मतलब है एक और skew परिवर्तन लागू, लेकिन इस बार विपरीत कोण के।
.parent { transform: skewX(45deg); }
.parent > * { transform: skew(-45deg); }
सामान्य में, अगर आप एक माता पिता के तत्व पर रूपांतरण की एक संख्या लागू करते हैं और आप बच्चे तत्वों को वापस सामान्य करने के लिए जाना चाहते हैं, तो आप एक ही रूपांतरण, केवल उलटे क्रम में (क्रम करता है आवेदन करना होगा ज्यादातर मामलों में मामला!) और स्कू, घूर्णन या अनुवाद के लिए उपयोग किए जाने वाले कोण/लंबाई मानों के लिए एक ऋण के साथ। पैमाने के मामले में, आपको 1/scale_factor_for_parent के स्केल फैक्टर की आवश्यकता है। यही कारण है, पैमाने के लिए, आप कुछ इस तरह करना होगा है:
.parent { transform: scale(4); }
.parent > * { transform: scale(.25); /* 1/4 = .25 */ }
बच्चों के साथ एक हीरे के आकार बहुत आसान है।
परिणाम:
एचटीएमएल:
<div class='wrapper'>
<div class='diamond'>
<div class='child'>Yogi Bear</div>
<div class='child'>Boo Boo</div>
</div>
</div>
सीएसएस:
012,.wrapper {
overflow: hidden;
margin: 0 auto;
width: 10em; height: 10em;
}
.diamond {
box-sizing: border-box;
margin: 0 auto;
padding: 4em 1em 0;
width: 86.6%; height: 100%;
transform: translateY(-37.5%) rotate(30deg) skewY(30deg);
background: lightblue;
}
.child {
transform: skewY(-30deg) rotate(-30deg);
}
इस लक्ष्य को हासिल करने के लिए एक ही रास्ता position:absolute; का उपयोग कर और बच्चे पर एक समान नकारात्मक डिग्री तिरछा डाल दस्तावेज़ प्रवाह से बाहर चाइल्ड तत्व लेने के लिए है।
इस के साथ समस्या यह है कि तुम अब मैन्युअल रूप से अपने माता-पिता का आकार परिवर्तन करना होगा कि है।