Rotate div 180 on Y-axis w/ javascript

@KorJul 28.2010 — #In fact you can do it with a single image, on using HTML5 canvas tag (all new browsers versions, except IE - so far) and some IE only DXImageTransform CSS on-the fly:

<i>
 </i>&lt;!doctype html&gt;
 &lt;head&gt;
 &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt;
 &lt;title&gt;rotate()&lt;/title&gt;
 
 <i>	</i>&lt;style type="text/css" media="screen"&gt;
 <i>	</i>img, canvas { border: 1px solid black; }
 <i>	</i>&lt;/style&gt;
 
 
 &lt;script type="text/javascript"&gt;
 
 function rotate(p_deg) {
 if(document.getElementById('canvas')) {
 /*
 Non IE
 */
 var image = document.getElementById('image');
 var canvas = document.getElementById('canvas');
 var canvasContext = canvas.getContext('2d');
 
 <i>	</i>	switch(p_deg) {
 <i>	</i>		default :
 <i>	</i>		case 0 :
 <i>	</i>			canvas.setAttribute('width', image.width);
 <i>	</i>			canvas.setAttribute('height', image.height);
 <i>	</i>			canvasContext.rotate(p_deg * Math.PI / 180);
 <i>	</i>			canvasContext.drawImage(image, 0, 0);
 <i>	</i>			break;
 <i>	</i>		case 90 :
 <i>	</i>			canvas.setAttribute('width', image.height);
 <i>	</i>			canvas.setAttribute('height', image.width);
 <i>	</i>			canvasContext.rotate(p_deg * Math.PI / 180);
 <i>	</i>			canvasContext.drawImage(image, 0, -image.height);
 <i>	</i>			break;
 <i>	</i>		case 180 :
 <i>	</i>			canvas.setAttribute('width', image.width);
 <i>	</i>			canvas.setAttribute('height', image.height);
 <i>	</i>			canvasContext.rotate(p_deg * Math.PI / 180);
 <i>	</i>			canvasContext.drawImage(image, -image.width, -image.height);
 <i>	</i>			break;
 <i>	</i>		case 270 :
 <i>	</i>		case -90 :
 <i>	</i>			canvas.setAttribute('width', image.height);
 <i>	</i>			canvas.setAttribute('height', image.width);
 <i>	</i>			canvasContext.rotate(p_deg * Math.PI / 180);
 <i>	</i>			canvasContext.drawImage(image, -image.width, 0);
 <i>	</i>			break;
 <i>	</i>	};
 
 <i>	</i>} else {
 <i>	</i>	/*
 <i>	</i>	IE
 <i>	</i>	*/
 <i>	</i>	var image = document.getElementById('image');
 <i>	</i>	switch(p_deg) {
 <i>	</i>		default :
 <i>	</i>		case 0 :
 <i>	</i>			image.style.filter = 'progid:DXImageTransform.Microsoft.BasicImage(rotation=0)';
 <i>	</i>			break;
 <i>	</i>		case 90 :
 <i>	</i>			image.style.filter = 'progid:DXImageTransform.Microsoft.BasicImage(rotation=1)';
 <i>	</i>			break;
 <i>	</i>		case 180 :
 <i>	</i>			image.style.filter = 'progid:DXImageTransform.Microsoft.BasicImage(rotation=2)';
 <i>	</i>			break;
 <i>	</i>		case 270 :
 <i>	</i>		case -90 :
 <i>	</i>			image.style.filter = 'progid:DXImageTransform.Microsoft.BasicImage(rotation=3)';
 <i>	</i>			break;
 <i>	</i>	};
 
 <i>	</i>};
 };
 
 
 window.onload = function() {
 var image = document.getElementById('image');
 var canvas = document.getElementById('canvas');
 if(canvas.getContext) {
 image.style.visibility = 'hidden';
 image.style.position = 'absolute';
 } else {
 canvas.parentNode.removeChild(canvas);
 };
 
 <i>	</i>rotate(0);
 };
 
 &lt;/script&gt;
 
 &lt;/head&gt;
 
 &lt;body&gt;
 
 
 &lt;p&gt;
 rotate:
 &lt;input type="button" value="0&amp;#176;" onclick="rotate(0);" /&gt;
 &lt;input type="button" value="90&amp;#176;" onclick="rotate(90);" /&gt;
 &lt;input type="button" value="180&amp;#176;" onclick="rotate(180);" /&gt;
 &lt;input type="button" value="-90&amp;#176;" onclick="rotate(-90);" /&gt;
 &lt;/p&gt;
 
 
 &lt;p&gt;
 &lt;img id="image" src="http://www.google.com/intl/en_ALL/images/logo.gif" alt="" /&gt;
 &lt;canvas id="canvas"&gt;&lt;/canvas&gt;
 &lt;/p&gt;
 &lt;/body&gt;
 &lt;/html&gt;

Rotate div 180 on Y-axis w/ javascript

2 Comments(s) _↴

Also in #JavaScript _↴

Success!

Social

Version

Rotate div 180 on Y-axis w/ javascript

2 Comments(s) ↴

Also in #JavaScript ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

2 Comments(s) _↴

Also in #JavaScript _↴