Box rotation | Sololearn: Learn to code for FREE!

+1

Box rotation

I want to move a box to perform an infinity 360 deg rotation.The box must in a container. Any help will be highly appropriated . In JavaScript plz

js

5/3/2021 6:59:23 PM

LoJax👨🏾‍💻

4 Answers

New Answer

+2

If you want an element to be in an endless rotation animation, use CSS. Check the answer to this: https://stackoverflow.com/questions/6410730/css-endless-rotation-animation Here is some JavaScript that uses CSS to rotate the "js" tag on this page. If you're on a laptop or desktop, open your browser's JavaScript console and paste this to see the "js" tag rotate infinitely: var e = document.querySelector('[data-value="js"]'); var style = document.createElement('style'); style.innerHTML = `@keyframes rotating { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }`; document.querySelector('head').appendChild(style); e.style.animation = 'rotating 2s linear infinite';

+1

Before you achieve a successful main axis roll rotation, you must first translate to the center C of each vertices T in the box. Then apply rotation for every vertices on a known angle A. Translation for a vertex V is simple vx' = cx - vx vy' = cy - vy Then rotate Vx' and Vy' vx' = tx * cos(a) * -sin(a) * tx; vy' = tx * -sin(a) * cos(a) * ty; This however, could be made easy with CSS "transform" property. For a box B, an infinite rotation would be let A = 0; setInterval(() => { A++; B.style.transform = `rotate(${A}deg)`; }, 10); It's always advisable for A to be in radian A' = A * 3.14159 / 180; It's also advisable to use the new requestAnimationFrame instead of setInterval incase of lag

+1

Josh and Miriele,Thank you.

+1

The Three.js library is another option if you prefer to use JavaScript. https://threejs.org/