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

Tips for relocating a CSS button

I have designed two buttons using css and I am looking to align them below the title "forecast customer activity". Due to extensive styling in css, the code might appear lengthy. Requesting assistance with a solution after reviewing the following code snip ...

javascripthtmlcss

The jQuery .hasClass() function does not work properly with SVG elements

I am working with a group of SVG elements that are assigned the classes node and link. My goal is to determine whether an element contains either the node or link class when hovering over any of the SVG components. However, I am encountering an issue where ...

javascriptjqueryhtmlcsssvg

Generate a series of rotations ranging from -60 to 60 using d3.cloud

I need help replicating the word cloud feature found on for my website. After studying examples and referencing a Stack Overflow answer, I put together the following code: var fill = d3.scale.category20(); var layout = d3.layout.cloud() .size([900, ...

javascriptjqueryd3.jsword-cloudd3-cloud

Is it possible for me to include &x&y&z in my Sass code?

When working with Sass, I have the following code: asdf{ &-b&-c {font-size: 16px;} } And I want the generated CSS to look like this: asdf.asdf-b.asdf-c{ font-size: 16px; } Is it possible to achieve this in Sass without having to repeat th ...

csssass

Obtain the dimensions of an element using the method `Sys

Recently, I have been working on an asp.net 4.0 web application where I encountered a challenge while trying to retrieve the bounds of a panel using Sys.UI.DomElement.getBounds method. My approach involved utilizing JQuery with the following code snippets: ...

asp.netajaxjquery

Tips for linking two project routes in NodeJS and incorporating React (I am interested in invoking React within the NodeJS project)

I'm in the process of linking two projects, one using reactJS and the other NodeJS. Currently, NodeJS is running smoothly on localhost:3000. Next, I want to call a React application which redirects to port localhost:3001. How can I seamlessly connect ...

javascripthtmlcssnode.jsreactjs

Setting the transition time for adding or removing components in ReactJS CSS

As the list component changes in size based on its children, it tends to move around abruptly. Applying transition: 'all 0.3s ease' doesn't resolve this issue since it's the layout that is affected by the number of children rather than ...

htmlcssreactjs

Is it possible to transfer data between the beforeSend and success functions within the jQuery .ajax method?

The Issue When utilizing AJAX to request data from a remote API, the asynchronous nature of the request means that responses come back whenever they are ready. The challenge arises when making multiple calls to the same API with different parameters, as i ...

jqueryajax

What is the best way to style HTML content with MathJax following its retrieval with jQuery.load?

I recently encountered an issue while using jQuery.load to load a new page. The content on the original page is being treated strangely in some way. Specifically, I have code on the original page that formats LaTeX commands with MathJax: <script type=" ...

javascriptjqueryhtmlmathjax

Using PHP to send JSONP callback responses

Is it possible to achieve "two-way" communication using JSONP and PHP? For example: jQuery / JSONP $.ajax({ url: 'http://server/po.php', cache : false, dataType: 'jsonp', timeout: 30000, type: 'GET', ...

javascriptphpjqueryajaxjsonp

Send multiple values as arguments to a jQuery function

Beginner question ahead: I'm using the jquery function loadNewPicture() to upload pictures and the progress() function to track the percentage of the upload. Everything is functioning correctly. My query relates to the variables that can be passed t ...

javascriptjqueryajax

Refresh a Div using JSON content with Struts2 Jquery Plugin

Is there a way to dynamically reload the content of a div with just a specific part of a JSON object in it? The code provided works perfectly, but it displays the entire JSON object within curly braces. I want only one variable from the object to be shown ...

jqueryjsonhtmlstruts2reload

Clearing selections from a multiple-choice input field

I am seeking to implement a delete feature in a multi-select element similar to the functionality seen here on stackoverflow when selecting multiple tags for a question. Once an item is selected, I would like to display a close icon next to it so that user ...

javascriptjquerycssangularjsmulti-select

Results from Ajax without displaying the view

I have implemented a method that utilizes jQuery form for handling file uploads. After the upload process, I aim to update a specific layer on the web page. Here is the code snippet... However, there is an issue with the method being a JsonResult, and I a ...

jqueryasp.net-mvcajax

Get a calendar that displays only the month and year

I am looking to incorporate two unique PrimeFaces calendars on a single page. The first calendar will display the date, while the second one will only show the month and year. To achieve this, I have implemented the following JavaScript and CSS specifica ...

javascriptcssprimefacesdatepickercalendar

Adaptable website design featuring dynamic data grid

I've spent quite some time searching for a way to achieve the layout displayed in the linked image, but I haven't been successful in finding exactly what I need. My goal is to create a responsive layout that includes a datagrid (ui-grid) within ...

htmlcsslayoutweb

Efficiently Parsing for PostgreSQL WHERE Clauses Using AJAX and PHP

Currently, I am facing a situation where I need to retrieve activities with corresponding version numbers. The challenge lies in the fact that some activities have only one version, while others have multiple versions. These activities are obtained through ...

phpjqueryajaxpostgresqlmultidimensional-array

Encountering a Tailwindcss error while attempting to compile the CSS file

Struggling to grasp Tailwind CSS as I try to compile the CSS but keep encountering errors. Despite following numerous tutorials, this persistent error continues to hinder my progress. This is the specific error message that keeps popping up: $ npm run bui ...

cssframeworkstailwind-css

How can I determine if a specific button has been clicked in a child window from a different domain?

Is there a method to detect when a specific button is clicked in a cross-domain child window that cannot be modified? Or determine if a POST request is sent to a particular URL from the child window? Below is an example of the HTML code for the button tha ...

javascriptjqueryajaxcross-domainparent-child

Can Three.js be used to create a compact canvas?

I've successfully implemented a three.js scene on my website where users can drag to rotate an object. However, I don't want the scene to take up the entire webpage. I tried adjusting the field parameters with the following code: renderer.setSiz ...

javascripthtmlcssthree.js