Need rotate div using animation

See more:

CSS

HTML

Hello

I need to show header with animation .Actually i have two header (header and advertisement ).If user click any where in screen it remove the existing header(example header) and show the another header(advisement header) with rotation.can you please tell me how to do that.

toggleHeaderBar : function() {
		console.log("toggleHeaderBar clicked");
		if ($('#headerRegion').offset().top != 0) {
			$('#headerRegion').css({
				"top" : "0px",
			//	"-webkit-transition" : "0.8s"
			});
			$('#advertisementRegion').css({
				"top" : "-300px",
				//"-webkit-transition" : "0.8s"
			});
			console.log("**************headerRegion***************");
			//*****************************Naveen*****************************
			//$('#advertisementRegion').css({"top" : "0px", "-webkit-transition":"rotateX(120deg)"});
			$('#bodyContentRegion').css({"top" : "55px", "-webkit-transition":"0.6s"});
		} else {
		console.log("**************advertisementRegion***************");
			$('#headerRegion').css({
				"top" : "-300px",
				//"-webkit-transition" : "4s"
			});
			$('#advertisementRegion').css({
				"top" : "0px",
				//"-webkit-transition" : "0.8s"
			});
			//$('#advertisementRegion').fadeIn(3000);
			//$('#advertisementRegion').css({"display":"block","top" : "0px", "-webkit-transition":"rotate(145deg)"});
			 $('#advertisementRegion').animate({
        'marginTop' : 180
    },{
        duration:750,
        step: function(now, fx) {
            $('#advertisementRegion').css('transform','rotate(' + 60 + 'deg)');
        }
    });
			$('#advertisementRegion').delay(300).animate({rotate: '80deg'}, 500);
			//$('#bodyContentRegion').css({"top" : "0px", "-webkit-transition":"0.6s"});
 //****************************************Naveen
		}

	},