Transforms Are Added...Endlessly

Transforms are added...endlessly

For more info and a demo of the answer below see https://stackoverflow.com/a/43744006/3877726

---

Using CSS transform : matrix function

If given a object position, scale and rotation the quickest way to set the transform is to do it as a single matrix element.style.transform = "matrix(a,b,c,d,e,f)";

The 6 values represent the direction and scale of the X axis (a,b), Y axis (c,d) , and the local origin (e,f)

As most of the time you don't want to skew and the scale is uniform (x and y scale the same) the function to create and set the transform is quick. All you do is pass the position, scale and rotation.

const setElementTransform = (function(){
    const matrix = [1,0,0,1,0,0]; // predefine the array (helps ease the GC load
    const m = matrix; // alias for code readability.
    return function(element, x, y, scale, rotation);
        m[3] = m[0] = Math.cos(rotation) * scale;     // set rotation and scale
        m[2] = -(m[1] = Math.sin(rotation) * scale);  // set rotation and scale
        m[4] = x;
        m[5] = y;
        element.style.transform = `matrix(${m.join(",")})`;
    }
}());

---

Don't use keyboardEvent.keyCode it has depreciated.

Rather than use the old (and obscure key values) keyCode property to read the keys you should use the code property that has a string representing which key is down or up.

const keys = {
    ArrowLeft : false,  // add only the named keys you want to listen to.
    ArrowRight: false,  
    ArrowUp   : false,  
    ArrowDown : false,  
    stopKeyListener : (function(){  // adds a listener and returns function to stop key listener if needed.
        function keyEvent(e){
            if(keys[e.code] !== undefined){ // is the key on the named list
                keys[e.code] = e.type === "keydown"; // set true if down else false
                e.preventDefault(); // prevent the default Browser action for this key.
        }
        addEventListener("keydown",keyEvent);
        addEventListener("keyup",keyEvent);
        return function(){
            removeEventListener("keydown",keyEvent);
            removeEventListener("keyup",keyEvent);
        }
    }()) //
}

Now at any time you can just check if a key is down with if(keys.ArrowLeft){

---

Updating the DOM regularly? use requestAnimationFrame

If you are making many changes to the DOM at regular intervals you should use requestAnimationFrame and it tells the browser your intention and will cause all DOM changes made from within the callback to sync with the display hardware and the DOM's own compositing and rendering.

requestAnimationFrame(mainLoop);  // will start the animation once code below has been parse and executed.
var player = {  // the player
    x : 0,
    y : 0,
    scale : 1,
    rotate : 0,
    speed : 0,
    element : document.getElementById("thePlayer")
}
function mainLoop(time){ // requestAnimationFrame adds the time as the first argument for the callback
     if(keys.ArrowLeft){ player.rotate -= 1 }
     if(keys.ArrowRight){ player.rotate += 1 }
     if(keys.ArrowUp){ player.speed  += 1 }
     if(keys.ArrowRight){ player.speed -= 1 }
     player.x += Math.cos(player.rotate) * player.speed;
     player.y += Math.sin(player.rotate) * player.speed;
     setElementTransform(
         player.element,
         player.x, player.y,
         player.scale,
         player.rotate
     );
     requestAnimationFrame(mainLoop);
}
      

For a demo https://stackoverflow.com/a/43744006/3877726 (same link as at top of answer)

Add CSS Transform which goes endlessly and doesn't stop

The default transition-timing-function is ease. That means the transition gets faster in its middle part. By changing it to linear the animation runs smoothly.

    svg {
        animation: rotate 1s 0s linear infinite;
    }

Reset CSS transform origin after translation / rotation

Resetting the transform origin, as you say is hard

However, you can keep adding transforms on the right side, with the previous ones unchanged, and you'll get what you want.

(As a side note, in a snippet you don't need the body element in the HTML, and the styles are better placed in the CSS editor.)

.tri-bx {  animation-name: start;  animation-duration: 5s;  animation-iteration-count: infinite;}
@keyframes start {  0% {    transform: rotate( 0deg);  }  33% {    transform: rotate( 315deg);  }  66% {    transform: rotate( 315deg) translate( 0, -5rem) rotate(0deg);  }  100% {    transform: rotate( 315deg) translate( 0, -5rem) rotate( 405deg);  }}
html,body {  height: 100%;  margin: 0;  padding: 0;}
body {  display: flex;  justify-content: center;  align-items: center;  background-color: #fdfdfd;  color: #aaa;  font-family: Arial, 'sans-serif';  font-size: 0.8rem;  letter-spacing: 0.1rem;}
.tri {  width: 0;  height: 0;  border-left: 1rem solid transparent;  border-right: 1rem solid transparent;  border-bottom: 1rem solid #555;  transform: scaleY( 2);  border-radius: 50%;}
.status,.instr {  position: absolute;}
.status {  top: 0;}
.instr {  bottom: 0;}

<div class="tri-bx">  <div class="tri"></div></div>

CSS endless rotation animation

Works in all modern browsers

.rotate{
 animation: loading 3s linear infinite;
 @keyframes loading {
  0% { 
    transform: rotate(0); 
  }
  100% { 
    transform: rotate(360deg);
  }
 }
}

Endless Rotating DIV but with Absolute Positioning

When using the animation you are overriding the initial transform property by specifying a new one. Instead you need to append rotation to translate in order to keep both of them working:

.randomName {  background-color: orange;  width: 150px;  height: 150px;  position: absolute;  left: 50%;  top: 50%;  transform: translate(-50%, -50%);  animation: orbita 2s linear infinite;  -webkit-animation: orbita 2s linear infinite;  -moz-animation: orbita 2s linear infinite;  -o-animation: orbita 2s linear infinite;}
@keyframes orbita {  0% {    transform:translate(-50%, -50%) rotate(0deg);  }  100% {    transform:translate(-50%, -50%) rotate(360deg);  }}

<div class="randomName"></div>

Infinite rotation animation using CSS and Javascript

Endless rotation - CSS3 Animation property and Keyframes:

@keyframes rotate360 {
  to { transform: rotate(360deg); }
}
img { animation: 2s rotate360 infinite linear; }

<img src="https://i.stack.imgur.com/qCWYU.jpg?s=64&g=1" />

---

Related Topics