मैं CSS3 ट्रांसफॉर्म और संक्रमण के माध्यम से किसी ऑब्जेक्ट को -180 डिग्री से 180 डिग्री तक घुमा देना चाहता हूं। यह ठीक काम करता है, लेकिन मैं रोटेशन की दिशा को नियंत्रित करना चाहता हूं। यह निर्धारित करने के लिए कि क्या यह घड़ी की दिशा में जा रहा है या घड़ी की दिशा में काउंटर होगा?CSS3 संक्रमण में रोटेशन की दिशा निर्धारित करने के लिए कैसे?
0 .. 180 घड़ी की दिशा में है, 0 .. -180 घुमावदार है। तो, सकारात्मक संख्या घड़ी की दिशा में घूमती है, नकारात्मक - दूसरी तरफ।
<html>
<style type="text/css">
.rotatedDiv {
margin-top: 200px;
margin-left: 200px;
-webkit-transition: -webkit-transform 3s ease-in;
-webkit-transform: rotate(1deg);
-moz-transform: rotate(1deg);
}
</style>
<body>
<div class="rotatedDiv" onclick="this.style.webkitTransform='rotate(-100deg)'">
This div will do a spin when clicked!
</div>
</body>
</html>
पहले हम घुमाए गए div प्रदर्शित:
मैं कैसे बारी बारी से करने का एक उदाहरण बनाया। जब आप उस पर क्लिक करेंगे, तो यह घुमाएगा। मूल्य के आधार पर - ऋणात्मक या सकारात्मक यह घड़ी के विपरीत या दक्षिणावर्त घुमाएगा।
लेकिन यदि आप 30 से 40 डिग्री के बीच एक संक्रमण चाहते हैं, तो केवल घड़ी के विपरीत? – Monokai
मैंने एक उदाहरण जोड़ा –
धन्यवाद। अंत में मैं एक समाधान के साथ आया, जो आपके उदाहरण से ट्रिगर हुआ। डिग्री कम से कम 0 और अधिकतम 360 तक सीमित नहीं हैं। उदाहरण के लिए आप -720 भी निर्दिष्ट कर सकते हैं। इस तरह आप घड़ी की दिशा और घड़ी के विपरीत आंदोलन को नियंत्रित कर सकते हैं। – Monokai
ऐसा लगता है कि आपको शुरुआती ठोस मूल्यों से "को" रखने की भी आवश्यकता है, अन्यथा +/- दिशा संकेत अच्छी तरह से व्यवहार नहीं करेगा।
मुझे लगता है कि आपको अपनी एनीमेशन में मध्य-बिंदु सेट करने की आवश्यकता होगी। मैंने कुछ भी नहीं देखा है जो आपको यह निर्दिष्ट करने देता है कि रोटेशन किस तरह से जाता है। – drudge
तो यह सीएसएस 3 एनीमेशन गुणों के माध्यम से है जिसका मतलब है? हां, यही मैंने सोचा था, लेकिन अगर मैं संभव हो तो सरल सीएसएस 3 संक्रमण और गुणों को बदलने के साथ ही इसे करना चाहता हूं। – Monokai