Entry: js css rotation
 
Description
Rotating graphics,images or pictures with javascript alone can cost quite alot of performance and works therefore only with small images. You could divide the small image in lots of divs with a background color, use a transformation matrix and reposition the divs but, as already mentioned, it is too cpu intense.
The Internet Explorer even got a filter to mirror and rotate graphics in a limited way, but we need an all browser solution.

Let's do some fake-rotating. Say you want to rotate an arrow graphic as seen above. You do not actually rotate the canvas of the picture but slide a picture strip in that canvas.
rotation image
This picture holds the arrow rotation states in 36x10 rotation. All that javascript does, is changing the CSS property backgroundPosition of that picture depending on the desired rotation. Javascript and CSS work nicely together here and if there is no need in rotating a random picture that you cannot prepare before usage, this technique works.
No source for download this time, all you need is right on that page, just view the source. Feel free to download and use the code and the arrow graphic strip.

createArrows(40);

// helper function for right rotation angle
function getDegrees(x,y){
	var ratio =  y / Math.sqrt(x*x+y*y);
	var angle = (Math.asin(ratio)*180/Math.PI + 360) % 360;

	if(x >= 0 && y >= 0){
		angle = 90 - angle;
	}else if(x >= 0 && y <= 0){
		angle = 450 - angle;
	}else if(x <= 0 && y <= 0){
		angle -= 90;
	}else if(x <= 0 && y >= 0){
		angle += 270;
	}
	return angle;
}

// rotation function
function rotate(event){
  
  var imageSize = 30;
  
  var divs = document.getElementsByTagName("div");
  var divsLength = divs.length;
   
  for (var i = 0;i < divsLength; ++i){
    try{
      if (divs[i].className == "rotationImage"){
        
        var positionInformation = divs[i].getAttribute("title").split("#");
        var x = parseInt(positionInformation[0]);
        var y = parseInt(positionInformation[1]);
        var mouseX = event.clientX - ((getBrowserSize(0) - 800)/2);
            var mouseY = event.clientY - 230 + getScrollPosition("y"); 
        var arg1 = mouseX - (x + imageSize / 2);
        var arg2 = mouseY - (y + imageSize / 2);        
        var rotation = (getDegrees(arg1,arg2) + 180) % 360;            
        
        var imageRotation;
        imageRotation = Math.floor(rotation / 10);
        var displacement = imageRotation * imageSize;
        divs[i].style.left = x + "px";
        divs[i].style.top = y + "px";
        divs[i].style.backgroundPosition = displacement + "px";
      }
    }catch(e){}
    
  }
}

function createArrows(number){
  var minX = 0;
  var maxX = 780;
  var minY = 0;
  var maxY = 500;
  
  for (var i = 0; i < number; ++i){
    var div = document.createElement("div");
    div.className = "rotationImage";
    var x = Math.floor(Math.random()*maxX + minX);
    var y = Math.floor(Math.random()*maxY + minY);
    div.style.left = x + "px";
    div.style.top = y + "px";
    div.title = x + "#" + y;
    document.getElementById("arrowField").appendChild(div);
  }
}
  
.rotationImage {
  width: 30px;
  height: 30px;
  position: absolute;
  background-image: url('rotation.png');    
}
Comments

NameE-Mail
send


Creative Commons License