क्या मैं transform: rotateY अपने माता-पिता के transform: rotateY का सामना करने के लिए एक div कर सकता हूं?
उदाहरण के लिए:
यदि मेरे पास rotateY(-45deg) के साथ मूल div है, तो उसके सभी बच्चे -45deg होंगे।
बच्चों को rotateY(45deg) क्यों नहीं जोड़ सकता है ताकि इसे कोई घूर्णन प्रभावित न किया जाए?
डेमो: http://jsfiddle.net/eBT4A/CSS3 ट्रांसफॉर्म: घूर्णन करने के लिए एक div घुमाएं माता-पिता
आप बच्चों जहां माता पिता 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>
आप माता-पिता के लिए की रक्षा-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 में काम नहीं करेगा कि।