एक्स = 0, वाई = 0 और जेड = 0 CSS3 के अलावा किसी अन्य पंक्ति के चारों ओर एक तत्व को घुमाने के लिए कैसे?

Question

मैंने प्रश्न को बेहतर समझने के लिए यह page बनाया है। जैसा कि आप CSS3 का उपयोग करके देख सकते हैं हम transform: rotate[XYZ](M deg/rad) का उपयोग कर एक्स, वाई या जेड अक्ष के चारों ओर एक तत्व घुमा सकते हैं।

लेकिन मैं किसी भी पंक्ति पर तत्व को घुमाने के लिए एक फ़ंक्शन ढूंढ रहा हूं। उदाहरण के लिए, तत्व को x=y लाइन पर घूर्णन करना। या यहां तक ​​कि अधिक जटिल y=2x+3।

यदि आप इसे समझ में नहीं आते हैं तो कृपया हाथ में एक पेपर रखें और इसे अपने दो दूर कोनों से फ़्लिप करें (y=x या y=-x के लिए)। या इस तस्वीर को देखो।

मेरा अनुमान है कि यह दो रोटेशन के संयोजन होगा, लेकिन मैं कैसे रोटेशन की गणना करने के पता नहीं है।

अद्यतन:

मुझे नहीं पता था सीएसएस transform के लिए एक rotate3d समारोह है। यह फ़ंक्शन चार तर्क rx, ry, rz और deg स्वीकार करता है। मुझे लगता है कि इस समस्या के लिए बहुत मददगार होगा।

अन्य बात यह है कि जब हम translate[X,Y,Z] बदलते हैं तो यह वास्तव में घूर्णन की उत्पत्ति को बदलता है। इसका मतलब यह है अगर आप के चारों ओर घूमने Y=10px आप translateZ10px को

Update2 बदलना चाहिए चाहते हैं:

मेरे वास्तविक लक्ष्य को लागू करने के सीएसएस एक GUI का उपयोग कर संपत्ति को बदलने के लिए एक उपकरण पैदा कर रही है। जैसा कि आप मेरी जेएसबीएन फाइल में देख सकते हैं। मैं इसे जो भी कर सकता हूं, उसे विस्तारित करना चाहता हूं। उनमें से एक रोटेशन है। मुझे यकीन है कि x=0 की तुलना में अन्य लाइनों के चारों ओर एक तत्व घुमाने के लिए संभव है ... लेकिन मुझे नहीं पता कि मैं गणना कैसे कर सकता हूं। उदाहरण के लिए रोटेशन 45deg Y और 45deg के आसपास Zx=y के आसपास 45 डिग्री घूर्णन के समान है। मुझे अंतरिक्ष में सभी लाइनों के लिए एक समाधान की जरूरत है।

Answer 1

प्रश्न के लिए समाधान मैं पूछ रहा हूँ सीएसएस समारोह, rotate3d बदलना है। इस फ़ंक्शन का उपयोग करके हम 3 डी स्पेस में किसी भी पंक्ति के आसपास DOM तत्वों को घुमा सकते हैं।

यह फ़ंक्शन चार तर्क स्वीकार करता है कि तीन पहले x, y और z और अंतिम एक रोटेशन है।जैसा कि मैं समझता हूँ कि यह कैसे समारोह काम आप rotate3d इस तरह में अपनी लाइन रेखीय बीजगणित समारोह अनुवाद कर सकते हैं:

आप तत्व को यह सीएसएस संपत्ति आवेदन करना चाहिए आप 1x + 2y + 3z = 0 तरह की एक पंक्ति कार्य हो और फिर अपने तत्व 30 डिग्री बारी बारी से करना चाहते हैं; transform: rotate3d(1, 2, 3, 30deg);।

मैंने rotate3d काम करने के तरीके को प्रदर्शित करने के लिए this छोटे ऐप बनाया है।

Answer 2

मैं समझता हूं कि आप समझते हैं कि आपका क्या मतलब है। इसलिए, यदि आप फ़ोटोशॉप को जानते हैं, जब आप किसी छवि को घुमाते हैं, तो आप एंकर पॉइंट चुन सकते हैं। यह वही विचार है। तो आप कोड रोटेशन-पॉइंट जोड़ते हैं: कक्षा में 50% 50%। केवल मुद्दा यह है कि, अभी तक किसी भी ब्राउज़र में रोटेशन पॉइंट स्वीकार नहीं किया गया है, लेकिन जल्द ही होगा। मैंने सोचा कि आपको पता होना चाहिए कि यह अंततः एक संभावना होगी। here अधिक

Answer 3

मैं लेख Rotation About an Arbitrary Axis in 3 Dimensions पर आलेख को पढ़ने का सुझाव देता हूं। मूल बातें कर रहे हैं:

(1) Translate space so that the rotation axis passes through the origin. 
(2) Rotate space about the z axis so that the rotation axis lies in the xz plane. 
(3) Rotate space about the y axis so that the rotation axis lies along the z axis. 
(4) Perform the desired rotation by θ about the z axis. 
(5) Apply the inverse of step (3). 
(6) Apply the inverse of step (2). 
(7) Apply the inverse of step (1).