gistfile1.html

<style>
	.orange{
		height: 150px;
		width: 225px;
	}
	.trans1 {
		transform: translate(100px,0px);
		-webkit-transition: -webkit-transform 3s ease-in;
	}
	.trans2{
		transform: scale(1.05);
		-webkit-transition: -webkit-transform 3s ease-in;
	}
	.trans3{
		transform: scale(.25);
		-webkit-transition: -webkit-transform 3s ease-in;
	}
	.trans4{
		transform: rotate(45deg);
		-webkit-transition: -webkit-transform 3s ease-in;
	}
	.trans5{
		transform: rotate(-45deg);
		-webkit-transition: -webkit-transform 3s ease-in;
	}
	.trans6{
		transform: skew(110deg,10deg);
		-webkit-transition: -webkit-transform 3s ease-in;
	}
</style>
<script>
	function translateMe(){
		var image = document.getElementById('orange1');
		image.classList.add('trans1');
	}
	function scaleMeUp(){
		var image = document.getElementById('orange2');
		image.classList.remove('trans3');
		image.classList.add('trans2');
	}
	function scaleMeDown(){
		var image = document.getElementById('orange2');
		image.classList.remove('trans2');
		image.classList.add('trans3');
	}
	function rotateMeRight(){
		var image = document.getElementById('orange3');
		image.classList.remove('trans5');
		image.classList.add('trans4');
	}
	function rotateMeLeft(){
		var image = document.getElementById('orange3');
		image.classList.remove('trans4');
		image.classList.add('trans5');
	}
	function skewMe(){
		var image = document.getElementById('orange4');
		image.classList.remove('trans6');
		image.classList.add('trans6');
	}
	function fixMe(){
		var image = document.getElementById('orange4');
		image.classList.remove('trans6');
	}
</script>
<h4>CSS3 Transform Examples</h4>
<div><b>Translate: Move Image 100 Pixels to the Right</b></div>
<article>
	<div>
		<img class="orange" src="posts/img/orange.jpg" alt="" id="orange1" style="position: relative"/>
	</div>
	<div>
		<button class=" btn btn-default" onclick="translateMe()">Move</button>
	</div>
</article>
<article>
    <div><b>Scale: Scale the Image Up and Down</b></div>
    <div>
		<img class="orange" src="posts/img/orange.jpg" alt="" id="orange2" style="position: relative"/>
	</div>
	<div>
		<button class=" btn btn-default" onclick="scaleMeUp()">Scale Up</button>
		<button class=" btn btn-default" onclick="scaleMeDown()">Scale Down</button>
	</div>
</article>
<article>
    <div><b>Rotate: Rotate the Image 45 Degrees</b></div>
    <div>
		<img class="orange" src="posts/img/orange.jpg" alt="" id="orange3" style="position: relative"/>
	</div>
	<div>
		<button class=" btn btn-default" onclick="rotateMeRight()">Rotate Right</button>
		<button class=" btn btn-default" onclick="rotateMeLeft()">Rotate Left</button>
	</div>
</article>
<article>
    <div><b>Skew: Make the Image All Messed-Up</b></div>
    <div>
		<img class="orange" src="posts/img/orange.jpg" alt="" id="orange4" style="position: relative"/>
	</div>
	<div>
		<button class=" btn btn-default" onclick="skewMe()">Mess-Up</button>
		<button class=" btn btn-default" onclick="fixMe()">Fix</button>
	</div>
</article>

Examples for doing a basic CSS3 transforms.