क्या मैं transform: rotateY
अपने माता-पिता के transform: rotateY
का सामना करने के लिए एक div कर सकता हूं?
उदाहरण के लिए:
यदि मेरे पास rotateY(-45deg)
के साथ मूल div है, तो उसके सभी बच्चे -45deg होंगे।
बच्चों को rotateY(45deg)
क्यों नहीं जोड़ सकता है ताकि इसे कोई घूर्णन प्रभावित न किया जाए?
डेमो: http://jsfiddle.net/eBT4A/CSS3 ट्रांसफॉर्म: घूर्णन करने के लिए एक div घुमाएं माता-पिता
5
A
उत्तर
0
आप बच्चों जहां माता पिता div rotateY (-45deg) के लिए rotateY (45deg) जोड़ सकते हैं, यह देखने के लिए कोई घुमाव है जैसे कि यह प्रभावित केवल जब आप इन करने के लिए एक ही धुरी सेट बनाने के लिए दो रोटेशन,
अपने डेमो उदाहरण मेंआप एक ही धुरी लागू नहीं किया है,
इस प्रयास करें ...
<html>
<head>
<style type="text/css">
body {
-webkit-perspective: 500;
}
#content {
position:absolute;
top: 0px;
left: 0px;
width: 300px;
height: 500px;
background: #000;
-webkit-transform-origin: 0px 0px;
-webkit-transform: rotate(45deg);
-moz-transform-origin: 0px 0px;
-moz-transform: rotate(45deg);
}
#element {
position:absolute;
top: 0px;
left: 0px;
width: 50px;
height: 50px;
background: #f00;
-webkit-transform-origin: 0px 0px;
-webkit-transform: rotate(-45deg);
-moz-transform-origin: 0px 0px;
-moz-transform: rotate(-45deg);
}
</style>
</head>
<body>
<div id="content">
<div id="element"></div>
</div>
</body>
</html>
0
आप माता-पिता के लिए की रक्षा-3 डी जोड़ने की जरूरत:
body {
-webkit-perspective: 500;
}
#content {
position:fixed;
top: 20px;
left: 0;
width: 300px;
height: 500px;
background: #000;
-webkit-transform-origin: 0 0;
-webkit-transform: rotateY(45deg);
-webkit-transform-style: preserve-3d;
}
#element {
position:fixed;
top: 20px;
left: 50%;
width: 50px;
height: 50px;
background: #f00;
-webkit-transform-origin: 0 0;
-webkit-transform: rotateY(-45deg);
}
जहाँ तक मुझे पता है, IE में काम नहीं करेगा कि।
संबंधित मुद्दे
- 1. CSS3 ट्रांसफॉर्म: एकाधिक उत्पत्ति?
- 2. CSS3 वैकल्पिक घुमाएं?
- 3. एक UIBarButtonItem ट्रांसफॉर्म (घुमाएं)
- 4. ट्रांसफॉर्म पर CSS3 एनीमेशन: घूमना। घूर्णन तत्व के वर्तमान डिग्री लाने के लिए रास्ता?
- 5. css3 ट्रांसफॉर्म-उत्पत्ति का केंद्र और ज़ूम
- 6. सीएसएस के साथ घूर्णन div पर लिंक
- 7. प्रॉपर्टी CSS3 स्केल ट्रांसफॉर्म करें लेकिन नीचे
- 8. CSS3 के कॉलम विभाजन मध्य div
- 9. प्रिंट करने के लिए RichTextBox घूर्णन पाठ
- 10. एक डीओएम तत्व स्केल/ज़ूम करें और जिस स्थान पर यह CSS3 ट्रांसफॉर्म स्केल()
- 11. एक ट्रांसफॉर्म का उपयोग करके घुमाएं, फिर फ्रेम मूल बदलें, और विस्तार देखें?
- 12. आईफोन/आईपैड पैन, पिंच और एक साथ दृश्य को घुमाएं
- 13. CSS3
- 14. एक ट्रांसफॉर्म
- 15. एक सीएसएस 3 डी ट्रांसफॉर्म
- 16. CSS3 3 डी ट्रांसफॉर्म परिप्रेक्ष्य को कैसे समझें
- 17. एक div
- 18. एंड्रॉइड 2.2 पर CSS3 एनीमेशन फ़्लिकर (वेबकिट-ट्रांसफॉर्म: अनुवाद (..) स्केल (..) एक ही समय में)
- 19. जावास्क्रिप्ट में IE9 के लिए -एम-ट्रांसफॉर्म
- 20. क्या यह CSS3 के साथ एक बग है: CSS3 ढाल
- 21. प्रोजेक्टिव ट्रांसफॉर्म के लिए होमोग्राफी
- 22. GIve css3 क्रोम में एक DIV पर घूमता है तो पृष्ठभूमि-अनुलग्नक: निश्चित बनाने की बग
- 23. एक बिंदु एफ़िन एक बिंदु के चारों ओर घूर्णन के लिए बदल जाता है?
- 24. CSS3
- 25. CSS3 बॉक्स छाया सहोदर div तत्व के पीछे दिखा
- 26. गलत मूल्य पर घूर्णन ऑब्जेक्ट एकता का घूर्णन
- 27. CSS3 - 3 डी फ्लिप एनीमेशन - आईई 10 ट्रांसफॉर्म-उत्पत्ति: संरक्षित-3 डी वर्कअराउंड
- 28. उत्पत्ति के आसपास एक बिंदु घूर्णन के लिए उचित त्रिकोणमिति
- 29. घुमाएं UIView iPhone
- 30. सीएसएस ट्रांसफॉर्म: अनुवाद चालान पद: निश्चित आंतरिक div