रोटा 3 डी शॉर्टहैंड

Question

rotateX(50deg) rotateY(20deg) rotateZ(15deg)शॉर्टहैंड में कैसे संयोजित करें rotate3d()?

Answer 1

rotateX(50deg) के बराबर है rotate3d(1, 0, 0, 50deg)

rotateY(20deg) के बराबर है rotate3d(0, 1, 0, 20deg)

rotateZ(15deg) के बराबर है rotate3d(0, 0, 1, 15deg)

इसलिए...

rotateX(50deg) rotateY(20deg) rotateZ(15deg)

के बराबर है

rotate3d(1, 0, 0, 50deg) rotate3d(0, 1, 0, 20deg) rotate3d(0, 0, 1, 15deg)

---

जेनेरिक के लिए rotate3d(x, y, z, α), आपके पास मैट्रिक्स है

कहाँ पे

---

अब आपको प्रत्येक 3 rotate3dपरिवर्तनों के लिए मेट्रिसेस मिलते हैं और आप उन्हें गुणा करते हैं। और परिणामी मैट्रिक्स परिणामी एकल के अनुरूप मैट्रिक्स है rotate3d। निश्चित नहीं है कि इसके लिए मूल्यों को निकालना कितना आसान है rotate3d, लेकिन एकल के लिए इसे निकालना आसान है matrix3d।

---

पहले मामले में ( rotateX(50deg)या rotate3d(1, 0, 0, 50deg)), आपके पास:

x = 1, y = 0, z = 0,α = 50deg

तो इस मामले में मैट्रिक्स की पहली पंक्ति है 1 0 0 0।

दूसरा वाला है 0 cos(50deg) -sin(50deg) 0।

तीसरा वाला 0 sin(50deg) cos(50deg) 0।

और चौथा स्पष्ट है 0 0 0 1।

---

दूसरे मामले में, तुम हो x = 0, y = 1, z = 0, α = 20deg।

पहली पंक्ति cos(20deg) 0 sin(20deg) 0:।

दूसरी पंक्ति: 0 1 0 0।

तीसरी पंक्ति: -sin(20) 0 cos(20deg) 0।

चौथा: 0 0 0 1

---

तीसरे मामले में, तुम हो x = 0, y = 0, z = 1, α = 15deg।

पहली पंक्ति cos(15deg) -sin(15deg) 0 0:।

दूसरी पंक्ति sin(15deg) cos(15deg) 0 0।

और तीसरी और चौथी पंक्ति क्रमशः 0 0 1 0और 0 0 0 1हैं।

---

नोट : आपने देखा होगा कि रोटेटी ट्रांसफॉर्म के लिए पाप मूल्यों के संकेत अन्य दो ट्रांसफॉर्मों की तुलना में अलग हैं। यह गणना की गलती नहीं है। इसका कारण यह है कि, स्क्रीन के लिए, आपके पास नीचे की ओर इशारा करते हुए y- अक्ष है।

---

तो ये तीन 4x4मैट्रिक्स हैं जिनके 4x4परिणामस्वरूप परिणामी एकल rotate3dरूपांतरण के लिए मैट्रिक्स प्राप्त करने के लिए आपको गुणा करना होगा । जैसा कि मैंने कहा है, मुझे यकीन नहीं है कि 4 मानों को प्राप्त करना कितना आसान हो सकता है, लेकिन 4x4 मैट्रिक्स में 16 तत्व matrix3dजंजीर परिवर्तन के बराबर के 16 पैरामीटर हैं ।

---

संपादित करें :

वास्तव में, यह पता चला है कि यह बहुत आसान है ... आप मैट्रिक्स के ट्रेस (विकर्ण तत्वों का योग) की गणना करते हैं rotate3d।

4 - 2*2*(1 - cos(α))/2 = 4 - 2*(1 - cos(α)) = 2 + 2*cos(α)

आप तीन 4x4मैट्रिसेस के उत्पाद के लिए ट्रेस की गणना करते हैं , आप परिणाम को 2 + 2*cos(α)निकालने के साथ बराबर करते हैं α। तो फिर तुम गणना x, y, z।

इस विशेष मामले में, यदि मैंने सही गणना की है, तो तीन 4x4मैट्रिक्स के उत्पाद से उत्पन्न मैट्रिक्स का पता लगाने जा रहा है:

T = 
cos(20deg)*cos(15deg) + 
cos(50deg)*cos(15deg) - sin(50deg)*sin(20deg)*cos(15deg) + 
cos(50deg)*cos(20deg) + 
1

तो cos(α) = (T - 2)/2 = T/2 - 1, जिसका अर्थ है कि α = acos(T/2 - 1)।

Comments

हाँ, मुझे यह भी पता नहीं है कि वास्तव में इसकी जाँच कैसे की जाती है। मैं पूरी तरह से जा रहा था जब तक मैंने पाप को नहीं देखा। क्योंकि इससे मेरा दिमाग खुल गया। जब मैंने पाप को देखा। आधार की

— चिल्लाहट

@AndrewLuhring कमाल।

— aendrew

ध्यान दें कि घूर्णन मैट्रिक्स केवल तभी लागू होता है जब [x,y,z]वेक्टर सामान्यीकृत होता है, अर्थात, यदि वेक्टर लंबाई Math.sqrt(x*x + y*y + z*z)एक है। यदि यह सामान्य नहीं है, यह आसानी से एक सामान्यीकृत एक में बदल किया जा सकता है डाइविंग प्रत्येक से x, yऔर zउनकी लंबाई से।

— जोस रुई सैंटोस

आप गणित में मास्टर ऑफ फाइन आर्ट्स धारण करना चाहिए। इस कविता के लिए धन्यवाद, एना!

— इडा

@ और: चिंता मत करो, पाप हम में से कई के बेहतर हो जाता है ... आह।

— डेविड कहते हैं

Answer 2

वाक्य - विन्यास:

rotate3d(x, y, z, a)

मान:

• x एक है <number>का वर्णन वेक्टर रोटेशन की धुरी को संकेतित का x- निर्देशांक।
• y एक है <number>का वर्णन वेक्टर रोटेशन की धुरी को संकेतित की y- निर्देशांक।
• z एक है <number>का वर्णन वेक्टर रोटेशन की धुरी को संकेतित की z निर्देशांक।
• a एक है <angle>रोटेशन के कोण का प्रतिनिधित्व। एक सकारात्मक कोण एक दक्षिणावर्त घूर्णन को दर्शाता है, एक नकारात्मक कोण एक काउंटर-दक्षिणावर्त।

जैसे की :

.will-distort{
    transform:rotate3d(10, 10, 10, 45deg);
}

यहां फिदा हो गया

यहाँ यह कर सकते हैं

इसके बारे में अधिक डॉक्स

Comments

शायद मैं मोटी हूं, लेकिन मुझे लगता है कि वह एक एल्गोरिथ्म के लिए जंजीर से एक एकल में जाने के लिए कह रहा है rotate3d, परिभाषा के लिए नहीं rotate3d।

— ऐना

मुझे लगता है कि वह जानना चाहता है कि रोटैक्स (50deg) रोटेटी (20deg) रोटेज (15deg) को शॉर्टहैंड रोटेंड 3 डी () में सीएसएस में कैसे

— मिलाया जाए

Answer 3

निर्भर करता है कि आप क्या करने की कोशिश कर रहे हैं, यह 'हैक' आपकी मदद कर सकता है। मान लें कि आप एनीमेशन कर रहे हैं, और आप परिवर्तन के बाद परिवर्तन जोड़ना चाहते हैं, और आप नहीं चाहते कि सीएसएस दिखे जैसे कि वह 100 रूपांतरण कर रहा है:

यह क्रोम में काम करता है: 1. जो कुछ भी आप एक तत्व में बदलना चाहते हैं उसे लागू करें। 2. अगली बार जब आप एक परिवर्तन जोड़ना चाहते हैं, तो इसे संगणित परिवर्तन में जोड़ें: "window.getComputedSty (तत्व) .transform" - लेकिन नए परिवर्तन को बाईं ओर रखना सुनिश्चित करें। 3. अब आपका ट्रांसफ़ॉर्म "रोटजेड (30 डीजीजी) मैट्रिक्स 3 डी (......) जैसा दिखेगा। अगली बार जब आप एक और ट्रांसफ़ॉर्म जोड़ना चाहते हैं, तो प्रक्रिया को दोहराएं - क्रोम हमेशा मैट्रिक्स 3 डी नोटेशन में ट्रांसफॉर्मेशन को कम करता है।

TL; DR- आप जो भी ट्रांसफ़ॉर्म चाहते हैं उसे लागू करें, और फिर कम्प्यूटेड मैट्रिक्स 3 डी ट्रांसफ़ॉर्म प्राप्त करें।

यह ट्रिक आपको जल्दी से (यानी खुद से कोई गणित किए बिना) एक कार्यक्षमता बनाता है जो किसी भी दिशा में आपके संदर्भ फ्रेम के संबंध में एक वस्तु को घुमाता है। नीचे का नमूना देखें:

संपादित करें : मैंने xyz अनुवादों को भी जोड़ा है। इसका उपयोग करते हुए, वस्तुओं को विशिष्ट 3 डी स्थानों में विशिष्ट अभिविन्यास के साथ रखना बहुत आसान होगा। या ... एक घन की कल्पना कीजिए जो उछलता है और बदलता है यह प्रत्येक उछाल के साथ स्पिन अक्ष है यह कैसे भूमि पर निर्भर करता है!

	var boxContainer = document.querySelector('.translator'),
	    cube = document.getElementById('cube'),
	    optionsContainer = document.getElementById('options');
	var dims = ['x', 'y', 'z'];
	var currentTransform;
	var currentTranslate;
	var init = function () {
	    optionsContainer.querySelector('.xRotation input')
	        .addEventListener('input', function (event) {
	        if (currentTransform != 'none') {
	            var newTransform = 'rotateX(' + (360 - event.target.value) + 'deg) ' + currentTransform;
	        } else {
	            var newTransform = 'rotateX(' + (360 - event.target.value) + 'deg)';
	        }
	        cube.style.transform = newTransform;
	    }, false);

	    optionsContainer.querySelector('.yRotation input')
	        .addEventListener('input', function (event) {
	        if (currentTransform != 'none') {
	            var newTransform = 'rotateY(' + (360 - event.target.value) + 'deg) ' + currentTransform;
	        } else {
	            var newTransform = 'rotateY(' + (360 - event.target.value) + 'deg)';
	        }
	        cube.style.transform = newTransform;
	    }, false);

	    optionsContainer.querySelector('.zRotation input')
	        .addEventListener('input', function (event) {

	        if (currentTransform != 'none') {
	            var newTransform = 'rotateZ(' + (360 - event.target.value) + 'deg) ' + currentTransform;
	        } else {
	            var newTransform = 'rotateZ(' + (360 - event.target.value) + 'deg)';
	        }
	        cube.style.transform = newTransform;
	    }, false);

	    optionsContainer.querySelector('.xTranslation input')
	        .addEventListener('input', function (event) {

	        if (currentTranslate != 'none') {
	            var newTransform = 'translateX(' + (100 - event.target.value) + 'px) ' + currentTranslate;
	        } else {
	            var newTransform = 'translateX(' + (100 - event.target.value) + 'px)';
	        }
	        boxContainer.style.transform = newTransform;
	    }, false);

	    optionsContainer.querySelector('.yTranslation input')
	        .addEventListener('input', function (event) {

	        if (currentTranslate != 'none') {
	            var newTransform = 'translateY(' + (100 - event.target.value) + 'px) ' + currentTranslate;
	        } else {
	            var newTransform = 'translateY(' + (100 - event.target.value) + 'px)';
	        }
	        boxContainer.style.transform = newTransform;
	    }, false);
	    optionsContainer.querySelector('.zTranslation input')
	        .addEventListener('input', function (event) {

	        if (currentTranslate != 'none') {
	            var newTransform = 'translateZ(' + (500 - event.target.value) + 'px) ' + currentTranslate;
	        } else {
	            var newTransform = 'translateZ(' + (500 - event.target.value) + 'px)';
	        }
	        boxContainer.style.transform = newTransform;
	    }, false);



reset();

	};

	function reset() {
	    currentTransform = window.getComputedStyle(cube).transform;
	    currentTranslate = window.getComputedStyle(boxContainer).transform;
	    optionsContainer.querySelector('.xRotation input').value = 360;
	    optionsContainer.querySelector('.yRotation input').value = 360;
	    optionsContainer.querySelector('.zRotation input').value = 360;
	    optionsContainer.querySelector('.xTranslation input').value = 100;
	    optionsContainer.querySelector('.yTranslation input').value = 100;
	    optionsContainer.querySelector('.zTranslation input').value = 500;


	}


	window.addEventListener('DOMContentLoaded', init, false);
	document.addEventListener('mouseup', reset, false);

.translator
{
	height: 200px;
	position: absolute;
	width: 200px;
    transform-style: preserve-3d;
}
.threeSpace
{
	height: 200px;
	moz-perspective: 1200px;
	o-perspective: 1200px;
	perspective: 200px;
	position: absolute;
	transform-origin: 50px 50px 100px;
	webkit-perspective: 1200px;
	width: 100px;
    perspective-origin: 100px 25px;
    transform-style: preserve-3d;
}
#pointer{
    position:relative;
    height:2px;
    width:2px;
    top:25px;
    left:100px;
    background:blue;
    z-index:9999;
    
}



#cube
{
	height: 100%;
	moz-transform-origin: 90px 110px 0px;
	moz-transform-style: preserve-3d;
	o-transform-origin: 90px 110px 0px;
	o-transform-style: preserve-3d;
	position: absolute;
	transform-origin: 90px 110px 0px;
	transform-style: preserve-3d;
	webkit-transform-origin: 90px 110px 0px;
	webkit-transform-style: preserve-3d;
	width: 100%;
}
#cube .midPoint{
    position:absolute;
    top:48px;
    left:48px;
    height:1px;
    width:1px;
    background:green;
}

#cube figure
{
	border: 2px solid black;
	color: white;
	display: block;
	font-size: 60px;
	font-weight: bold;
	height: 96px;
	line-height: 96px;
	position: absolute;
	text-align: center;
	width: 96px;
    /* transform-style: preserve-3d; */
}
#cube .front
{
	background: hsl(0, 100%, 50%);
}

#cube .back
{
	background: hsl(60, 100%, 50%);
}
#cube .right
{
	background: hsl(120, 100%, 50%);
}
#cube .left
{
	background: hsl(180, 100%, 50%);
}
#cube .top
{
	background: hsl(240, 100%, 50%);
}
#cube .bottom
{
	background: hsl(300, 100%, 50%);
}
#cube .front
{
	moz-transform: translateZ(50px);
	o-transform: translateZ(50px);
	transform: translateZ(50px);
	webkit-transform: translateZ(50px);
}



#cube .back
{
	moz-transform: rotateX(-180deg) translateZ(50px);
	o-transform: rotateX(-180deg) translateZ(50px);
	transform: rotateX(-180deg) translateZ(50px);
	webkit-transform: rotateX(-180deg) translateZ(50px);
}
#cube .right
{
	moz-transform: rotateY(90deg) translateZ(50px);
	o-transform: rotateY(90deg) translateZ(50px);
	transform: rotateY(90deg) translateZ(50px);
	webkit-transform: rotateY(90deg) translateZ(50px);
}
#cube .left
{
	moz-transform: rotateY(-90deg) translateZ(50px);
	o-transform: rotateY(-90deg) translateZ(50px);
	transform: rotateY(-90deg) translateZ(50px);
	webkit-transform: rotateY(-90deg) translateZ(50px);
}
#cube .top
{
	moz-transform: rotateX(90deg) translateZ(50px);
	o-transform: rotateX(90deg) translateZ(50px);
	transform: rotateX(90deg) translateZ(50px);
	webkit-transform: rotateX(90deg) translateZ(50px);
}
#cube .bottom
{
	moz-transform: rotateX(-90deg) translateZ(50px);
	o-transform: rotateX(-90deg) translateZ(50px);
	transform: rotateX(-90deg) translateZ(50px);
	webkit-transform: rotateX(-90deg) translateZ(50px);
}
#options{
    position:absolute;
    width:80%;
    top:40%;
    
    
}
#options input
{
	width: 60%;
}

<body>
    
     <div class="threeSpace">
         <div id="pointer"></div>
    <div class="translator">
        <div id="cube">
            <figure class="front"><div class='midPoint'></div></figure>
            <figure class="back"></figure>
            <figure class="right"></figure>
            <figure class="left"></figure>
            <figure class="top"></figure>
            <figure class="bottom"></figure>
        </div>
    </div>
    </div>
    <section id="options">
        <p class="xRotation">
            <label>xRotation</label>
            <input type="range" min="0" max="720" value="360" data-units="deg" />
        </p>
        <p class="yRotation">
            <label>yRotation</label>
            <input type="range" min="0" max="720" value="360" data-units="deg" />
        </p>
        <p class="zRotation">
            <label>zRotation</label>
            <input type="range" min="0" max="720" value="360" data-units="deg" />
        </p>
        <p class="xTranslation">
            <label>xTranslation</label>
            <input type="range" min="0" max="200" value="100" data-units="deg" />
        </p>
        <p class="yTranslation">
            <label>yTranslation</label>
            <input type="range" min="0" max="200" value="100" data-units="deg" />
        </p>
        <p class="zTranslation">
            <label>zTranslation</label>
            <input type="range" min="0" max="1000" value="500" data-units="deg" />
        </p>
    </section>
</body>

Comments

यह अब तक की सबसे उपयोगी पोस्टों में से एक है, थैंक यू

— डेमियानो सेलेन्ट जुएल

Answer 4

सटीक मूल्य है rotate3d(133,32,58,58deg)

फ़िडेल देखें (क्रोम और सफारी के लिए, -webkit- परिवर्तन का उपयोग करके)

Comments

आप वास्तव में इसकी गणना कैसे करते हैं?

— ऐना

@ एना मैं नहीं, इसीलिए आपका जवाब 10x बेहतर है :)

— बिग फुड