css 3d transform rotate (x + y) using mouse drag

Question

i was recently diving into the world of css transform and wanted to rotate a div (x and y axis), i was able to do it with 2 sliders with 0 to 360 degree range but now looking forward to do it with dragging the mouse, i have made a very sloppy effort on that looking for suggestion to fix it:

jsfiddle link to test

"use strict"; let elContainer = $('#container'); let elBox = $('#box'); $(document).ready(function() { $('.slider-rotate').on('input', function() { sliderRotate(); }); elContainer.mousedown(function(e) { initDragRotate(e); }); elContainer.mousemove(function(e) { dragRotate(e); }); elContainer.mouseup(function(e) { endDragRotate(); }); }); let dragging = false; let delta = {}; function initDragRotate(e) { dragging = true; delta = { x: e.pageX, y: e.pageY, }; } function dragRotate(e) { if (!dragging) { return; } delta.x = e.pageX - delta.x; delta.y = e.pageY - delta.y; let rotateParam = ''; rotateParam += ' rotate' + 'Y' + '(' + delta.x + 'deg)'; rotateParam += ' rotate' + 'X' + '(' + delta.y + 'deg)'; elBox.css('transform', rotateParam); } function endDragRotate() { if (!dragging) { return; } dragging = false; } function sliderRotate() { let rotateParam = ''; $('.slider-rotate').each(function() { rotateParam += ' ' + getRotateParamString($(this)); }); elBox.css('transform', rotateParam); } function getRotateParamString(elClass) { let val = elClass.val(); let rotateType = elClass.data('rotateType'); let rotateParam = 'rotate' + rotateType + '(' + val + 'deg)'; return rotateParam; }

#container { background: #ccc; padding: 10vh; display: flex; align-items: center; justify-content: center; } #box { width: 30vh; height: 30vh; border: 5px solid #000; position: relative; transform-style: preserve-3d; } #box>div { position: absolute; left: 0; right: 0; top: 0; bottom: 0; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="container"> <div id="box"> <div style="background: #f00;"></div> <div style="background: #0f0;"></div> </div> </div> <div id="control"> <br> <label> x <input type="range" class="slider-rotate" data-rotate-type="X" min="0" max="360" value="0"> </label> <br> <label> y <input type="range" class="slider-rotate" data-rotate-type="Y" min="0" max="360" value="0"> </label> </div>

also, there's 2 div on top and bottom (green and red) with transform-style preserve-3d property, hoping that it's show the other color when flipped but no luck! please suggest, thanks!

@A Haworth I think the asker wanted to ask that how to make the box rotate with the help of mouse drag — True Alpha
– True Alpha, Commented Nov 24, 2021 at 5:41
@AHaworth, hi, thanks, yes, Garv Puri is correct, please see the fiddle link to see what i've came up so far, thanks! — Nishu Ali
– Nishu Ali, Commented Nov 24, 2021 at 5:48
OK, I'll try asking the other way round! What is it that is supposed to happen when the mouse is dragged? How is the rotation to be calculated? — A Haworth
– A Haworth, Commented Nov 24, 2021 at 6:04
@AHaworth i'm not quite experienced with this, hence the question, please see the sliders at the bottom, i'm just looking forward to move 360 degree x and y axis by dragging accordingly, maybe rotate again if more than 360 degree, and of course there could be another slider for intensity like how much drag movement will rotate at what % like slow or fast or maybe keep it spinning for some time if dragged too fast, but i'm not sure of the logic for successfully rotating it on drag, thanks! — Nishu Ali
– Nishu Ali, Commented Nov 24, 2021 at 6:23

A Haworth · Accepted Answer · 2021-11-24 07:00:06Z

The calulation for how much to rotate is a little odd.

I believe what you need is to have the amount of rotation dependent on the amount the mouse is placed across and down the screen. To make this proportional to the screen size you need to divide it by the screen size and then multiply it by 360 to get the full range from pageX/Y being 0 to being at the right/bottom of the screen.

"use strict"; let elContainer = $('#container'); let elBox = $('#box'); $(document).ready(function() { $('.slider-rotate').on('input', function() { sliderRotate(); }); elContainer.mousedown(function(e) { initDragRotate(e); }); elContainer.mousemove(function(e) { dragRotate(e); }); elContainer.mouseup(function(e) { endDragRotate(); }); }); let dragging = false; let delta = {}; function initDragRotate(e) { dragging = true; delta = { x: e.pageX, y: e.pageY, }; } function dragRotate(e) { if (!dragging) { return; } // THIS IS THE CALCULATION THAT HAS CHANGED delta.x = e.pageX / window.innerWidth * 360; //- delta.x; delta.y = e.pageY / window.innerHeight * 360; // - delta.y; let rotateParam = ''; rotateParam += ' rotate' + 'Y' + '(' + delta.x + 'deg)'; rotateParam += ' rotate' + 'X' + '(' + delta.y + 'deg)'; elBox.css('transform', rotateParam); } function endDragRotate() { if (!dragging) { return; } dragging = false; } function sliderRotate() { let rotateParam = ''; $('.slider-rotate').each(function() { rotateParam += ' ' + getRotateParamString($(this)); }); elBox.css('transform', rotateParam); } function getRotateParamString(elClass) { let val = elClass.val(); let rotateType = elClass.data('rotateType'); let rotateParam = 'rotate' + rotateType + '(' + val + 'deg)'; return rotateParam; }

#container { background: #ccc; padding: 10vh; display: flex; align-items: center; justify-content: center; } #box { width: 30vh; height: 30vh; border: 5px solid #000; position: relative; transform-style: preserve-3d; } #box>div { position: absolute; left: 0; right: 0; top: 0; bottom: 0; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="container"> <div id="box"> <div style="background: #f00;"></div> <div style="background: #0f0;"></div> </div> </div> <div id="control"> <br> <label> x <input type="range" class="slider-rotate" data-rotate-type="X" min="0" max="360" value="0"> </label> <br> <label> y <input type="range" class="slider-rotate" data-rotate-type="Y" min="0" max="360" value="0"> </label> </div>

any suggestion on why color red (the div in the back) is not showing on rotate, or am i supposed to create a different question for that?
Actually it might be better to create a new question as it’s a different problem.

Collectives™ on Stack Overflow

css 3d transform rotate (x + y) using mouse drag

1 Answer 1

2 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Related