वेबकिट-ट्रांसफॉर्म-उत्पत्ति को अपने किनारों पर 3 डी घन रोल करने के लिए कैसे सेट करें?

Question

मैं CSS3 परिप्रेक्ष्य & परिवर्तनों के साथ चारों ओर झुका रहा हूं। this great 3D cube example से शुरू, मैं घन को संशोधित करना चाहता हूं जैसे कि यह न केवल अपने केंद्र के चारों ओर घूमता है, बल्कि इसके किनारों पर रोल करता है।

मुझे -webkit-transform-origin: bottom left (see fiddle के साथ घन घूर्णन करके काम करने वाला पहला बायां झुकाव मिला; उदाहरण सादगी के लिए बाएं टिल्ट तक सीमित)। बाद के बाएं झुकाव के लिए, मैं मूल रूप से समायोजित करने के लिए संघर्ष कर रहा हूं। संकल्पनात्मक रूप से, मुझे मूल कंटेनर से संबंधित उत्पत्ति को सेट करने की आवश्यकता होगी (यानी लगातार बाएं टिल्ट के लिए, इसे 200px चरणों में धीरे-धीरे बाईं ओर घूमना चाहिए)।

किसी भी मदद की बहुत सराहना की जाती है!

Answer 1

मुझे इस पर जाना पड़ा है और मुझे लगता है कि आपको सीएसएस matrix transformations में जो कुछ भी आप चाहते हैं उसे प्राप्त करने के लिए आपको उपलब्ध होना होगा।

दुर्भाग्यवश यह घूमने जितना आसान नहीं है, फिर उत्पत्ति को स्थानांतरित करें। क्या होता है कि घन उस किनारे के चारों ओर घुमाया जाता है, लेकिन फिर यदि आप परिवर्तन के बिंदु को स्थानांतरित करते हैं तो यह मूल के इस नए बिंदु का उपयोग करके पिछले परिवर्तन को घन में लागू करता है।

घन की स्थिति का अनुवाद करने के लिए आपको और क्या चाहिए। आप इसे घूर्णन का उपयोग करके पूरी तरह से स्थानांतरित नहीं कर सकते हैं। Matrices मुझे यह सब हल करना चाहिए (मुझे डर है कि मुझे डर है)

आप संशोधित jsfiddle को देख सकते हैं जिसे मैंने बनाया है जहां घन घुमाया गया है और अनुवाद किया गया है। अनुवाद का बिंदु केंद्र है, इसलिए ऐसा लगता है कि घन "रोलिंग" नहीं है।

... 

//left 
zAngle -= 90; 
xPos -= 50; 
//rotate and translate the position of the cube 
$('#cube')[0].style["WebkitTransform"]="translateX("+xPos+"px) rotateZ("+zAngle+"deg)"; 

... 

js यहाँ फिडल: http://jsfiddle.net/DigitalBiscuits/evYYm/20/

आशा इस मदद करता है यहां महत्वपूर्ण अतिरिक्त कोड है!

Answer 2

मुझे लगता है कि यह ट्यूटोरियल आपकी मदद कर सकता है।

http://desandro.github.io/3dtransforms/docs/cube.html

आप अपने किनारों, बस rotateZ और translateX ऊपर रोल करना चाहते हैं। लेकिन आप कितनी तेजी से घूमना चाहते हैं, आपको इसे शांत करना पड़ सकता है।

http://desandro.github.io/3dtransforms/examples/cube-02-show-sides.html