Drag a spinning cube using CSS and Jquery when the mouse is pressed

I'm attempting to develop a dynamic rotating cube that users can manipulate to their desired side by clicking and dragging on the cube. Currently, I have functionality where the cube moves as the mouse cursor moves across the screen, but this results in difficulty controlling which side of the cube you want it to face, and there's no way to stop the rotation.

You can take a look at my codepen example here: https://codepen.io/ryan_pixelers/pen/kkVErB

JQuery code responsible for rotating the cube:

$(function(){
  $(window).mousemove(function(e){
    $('.cube').css('transform', 'rotateX(' + - e.pageY + 'deg)' +     'rotateY(' + e.pageX + 'deg)');
  }); 
})

I require a smooth movement similar to this, but only when the mouse is clicked. Unfortunately, mousedown doesn't seem to trigger this effect.

Thank you!

jquerycsscss-transforms

Answer №1

After pondering the question for a moment, I believe I have come up with the answer on my own:

Here is the updated jQuery code snippet:

$(function(){
  $(window).mousedown(function(){
  $(window).mousemove(function(e){
      $('.cube').css('transform', 'rotateX(' + - e.pageY + 'deg)' + 'rotateY(' + e.pageX + 'deg)');
  });

  $(window).mouseup(function(){
    $(this).off( "mousemove" );
  });

  }); 
})

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Display a DIV element when hovering over another DIV element using CSS or JavaScript without them being directly related as parent and

So I've figured out how to use CSS to show a hidden div when you hover over its parent. But what if the hidden div is not a child of the parent you want to hover on? How do you make it appear then? For example: <div class="field-1"></div> ...

javascriptjqueryhtmlcss

Running a setInterval function with Jquery when the window is minimized

I have implemented an image slider that uses a jQuery function setInterval() to replace images at timed intervals. However, I encountered a small issue where the function continues to run even after minimizing the browser window. Upon restoring the window, ...

jquerytimersetinterval

Using asynchronous data in Angular 2 animations

Currently, I have developed a component that fetches a dataset of skills from my database. Each skill in the dataset contains a title and a percentage value. My objective is to set the initial width value of each div to 0% and then dynamically adjust it t ...

javascriptcssangulartypescriptasynchronous

The CSS transition feature does not seem to be functioning properly when it comes to displaying

In my Next.js application, I am using a card component with a "read more" link that should expand the card when clicked. To achieve this behavior, I integrated the "react-show-more" library from https://github.com/One-com/react-show-more. I tried to add ...

htmlcssreactjsnext.js

Adding a CSS link to the header using JavaScript/jQuery

Is there a way to dynamically inject a CSS link located in the middle of an HTML page into the head using JavaScript? <head> ... styles here </head> <body> code <link href='http://fonts.googleapis.com/css?family=Lato:400,300, ...

javascriptjqueryhtmlcss

Is there a way to verify the presence of a value and then isolate it without affecting the rest

When making an ajax call, the response is received in the following format: var response = { "wwc_tag_names": [{ "waterbreak_free": "waterbreak_free" }], "wwc_details": [{ "generatedid": "2", "timer_value": "5", ...

jquery

Encountered a parsing error while attempting to include the navigation bar page

<?php echo <<< END <!DOCTYPE html> <!-- --> <html> <head> <title>Nav</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0 ...

phphtmlcsstwitter-bootstrapnavbar

Tips for switching the status of each item as I navigate the page with the tab key

I am facing an issue with my list of items that have hidden content appearing on hover. I want to achieve the same functionality while tabbing through my page, but currently, all hidden content appears at once. Check out a live example of my code here jQ ...

javascriptjqueryhtmlcss

What is the best way to align an image to flex-end?

I recently started using React and ran into issues trying to align my image using CSS. Despite trying various methods like justifyContent, justifySelf, and floating right, I couldn't get the image to align on the right side of the screen without resor ...

cssreactjs

How can I change JSON to an array using Jquery?

Snippet var jsonData = '{"Error":"Only alphabet characters and spaces are allowed in the name"}'; try { // Parsing JSON string into a JavaScript array var dataArr = $.parseJSON(jsonData); // Iterating through the array for (let key i ...

jqueryjson

Challenges with the dropdown menu navigation bar

I am struggling with my dropdown menu and sign up/sign in buttons as they are not aligning properly. I have tried various coding methods but haven't been able to fix the issue. Can someone provide me with suggestions on how to rectify this problem? c ...

javascriptphphtmljquerycss

Is it possible for me to utilize this code for logging in through a dialog box?

Here is the code snippet I have on the client side: <p>Username:</p> <p><asp:TextBox ID="tbUsername" runat="server"></asp:TextBox></p> <p>Password:</p> <p><asp:TextBox ID="tbPassword" runat="server ...

c#javascriptjqueryasp.netdialog

What is the best way to capture source code and store it in a text file?

Can you assist me in extracting the source code of a webpage and saving it into a text file? My goal: Instead of going through the process of right-clicking on the page, selecting view source code, copying, and pasting into a text file... I want to simpl ...

javascriptjquery

Discover the secret to creating a seamless looping effect on text using CSS gradients, giving the illusion of an endless loop

Could use some assistance with looping this gradient smoothly over the text without any annoying jumps appearing during the animation. Is there a way to achieve a seamless movement across the text? Any suggestions on how to approach this? Here is a liv ...

htmlcss

Present a pop-up notification box with a countdown of 30 seconds prior to the expiration of a session timeout in JSF

Our task is to create a timeout window that appears 30 seconds before the session expires. If the user remains inactive, they will be automatically redirected to the home page. We already have the maximum allowed duration of inactivity defined. I would l ...

javajavascriptjqueryjsf-2

Determining whether the selection in jQueryUI autocomplete was made using the ENTER key or not

Seeking assistance with implementing an autocomplete field using jQuery 1.7.2 and jQueryUI 1.8.12 to achieve the following: If a suggestion is chosen from the autocomplete list (via mouse or keyboard), execute function A If no matches are found (meaning ...

jqueryjquery-ui-autocomplete

Conceal a button using an AJAX POST request

I'm encountering an issue with my Ajax post where I am trying to disable the button used to submit data. I've reviewed my code and it seems accurate, but the button is not getting disabled. I attempted using $("#refreshButton").attr("disabled", t ...

javascriptajaxjquery

It is not possible for $_GET to loop through an array

I have a list of values called dataId obtained from checkbox selections, and I want to send it via a GET AJAX request: dataId = 1, 2, 16, 15, 17, 3, 14, 5, 9, 11; URI = "<?php echo site_url('Terpasang/Update_Kebutuhan_ke_Terpasang')?>"; $. ...

phpjqueryajaxcodeigniter

Activate the initial tab in JQuery UI accordion upon initialization

Hello, I have implemented a simple sidenav menu on my website. It consists of parent items and child items structured according to the h3 > div format as suggested by JQuery's documentation. My challenge now is to automatically open the "active" t ...

javascriptjqueryhtmlopencart

Summing up numbers within a hierarchical table using jQuery

There are two tables, each with their own unique ID as shown below: <table id="cvo"> <tr id="1"> <td>C</td> </tr> <tr id="2"> <td>C</td> </tr> <tr id="3"> <td>O</ ...

javascriptjquery