css rotation on click

Placebo · 10-10-2011 2:05pm #1

Hey guys,
I have a wheel, i want it to rotate upon clicking somewhere else [menu]
My educated guess is that this is not possible without Javascript?
You would have to add/remove class or have some trickery to apply the css animation on click ?

If so, is it not better to just use Jquery for the rotation all together? :pac:

thoughts welcome

Thanks

tricky D · 10-10-2011 2:12pm

Found this

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>rotate()</title>
	
	<style type="text/css" media="screen">
	img, canvas { border: 1px solid black; }
	</style>


<script type="text/javascript">

function rotate(p_deg) {
	if(document.getElementById('canvas')) {
		/*
		Ok!: Firefox 2, Safari 3, Opera 9.5b2
		No: Opera 9.27
		*/
		var image = document.getElementById('image');
		var canvas = document.getElementById('canvas');
		var canvasContext = canvas.getContext('2d');
		
		switch(p_deg) {
			default :
			case 0 :
				canvas.setAttribute('width', image.width);
				canvas.setAttribute('height', image.height);
				canvasContext.rotate(p_deg * Math.PI / 180);
				canvasContext.drawImage(image, 0, 0);
				break;
			case 90 :
				canvas.setAttribute('width', image.height);
				canvas.setAttribute('height', image.width);
				canvasContext.rotate(p_deg * Math.PI / 180);
				canvasContext.drawImage(image, 0, -image.height);
				break;
			case 180 :
				canvas.setAttribute('width', image.width);
				canvas.setAttribute('height', image.height);
				canvasContext.rotate(p_deg * Math.PI / 180);
				canvasContext.drawImage(image, -image.width, -image.height);
				break;
			case 270 :
			case -90 :
				canvas.setAttribute('width', image.height);
				canvas.setAttribute('height', image.width);
				canvasContext.rotate(p_deg * Math.PI / 180);
				canvasContext.drawImage(image, -image.width, 0);
				break;
		};
		
	} else {
		/*
		Ok!: MSIE 6 et 7
		*/
		var image = document.getElementById('image');
		switch(p_deg) {
			default :
			case 0 :
				image.style.filter = 'progid:DXImageTransform.Microsoft.BasicImage(rotation=0)';
				break;
			case 90 :
				image.style.filter = 'progid:DXImageTransform.Microsoft.BasicImage(rotation=1)';
				break;
			case 180 :
				image.style.filter = 'progid:DXImageTransform.Microsoft.BasicImage(rotation=2)';
				break;
			case 270 :
			case -90 :
				image.style.filter = 'progid:DXImageTransform.Microsoft.BasicImage(rotation=3)';
				break;
		};
		
	};
};


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);
	};
	
	rotate(0);
};

</script>

</head>

<body>


<p>
	rotate:
	<input type="button" value="0&#176;" onclick="rotate(0);" />
	<input type="button" value="90&#176;" onclick="rotate(90);" />
	<input type="button" value="180&#176;" onclick="rotate(180);" />
	<input type="button" value="-90&#176;" onclick="rotate(-90);" />
</p>


<p>
	<img id="image" src="http://www.google.com/intl/en_ALL/images/logo.gif" alt="" />
	<canvas id="canvas"></canvas>
</p>


</body>
</html>

Placebo · 10-10-2011 2:15pm

cheers tricky but that has javascript in it, so i was wondering would i just be better off using jquery animate and have a smoother look in the end.

i guess rotating can work on hover but clicking will need javascript - i think?

Liam Byrne · 11-10-2011 8:38pm

You do know that jQuery is Javascript (albeit a tidy version that makes cross-browser crap a million times easier) ?

Giblet · 11-10-2011 10:58pm

There is a CSS3 way to do this, using two divs overlapping each other using absolute positioning, and a css transition. It involves abusing pointer-events:none though to be able to switch between two :target pseudo classes though (well just to deselect one of them actually). I'll go into more detail but it will not work in all browsers so only if you want to consider it.

Placebo · 12-10-2011 1:12am

Liam Byrne wrote: »

You do know that jQuery is Javascript (albeit a tidy version that makes cross-browser crap a million times easier) ?

yes i know. I probably gave the wrong impression using the terms Javascript and jquery simultaneously

thanks giblet, i just went with a jquery plugin instead, its really smooth,
jquery impresses me everytime

css rotation on click

Comments