There are many ways to rotate a div or a particular block. We can use animate to move a block from one position to another.
Here is a simple way to change the position of a simple block.
HTML:-
<div id="rotator">
	<div id="block-1" class="active">
		<h2>Subtitle #1</h1>
		<div>
			<h1>WE DO COOL STUFF</h1>
			<img src="spacefrog.jpg" alt="space frog">
			<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
		</div>
	</div>
	
	<div id="block-2" class="block2_content">
		<h2>Subtitle #2</h2>
		<div>
			<h1>FREQUENTLY ASKED QUESTIONS</h1>
			<img src="goblins.jpg" alt="goblins">
			<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
		</div>			
	</div>
	
	<div id="block-3" class="block3_content">
		<h2>Subtitle #3</h2>
		<div>
			<h1>WHY WE ARE BUG FREE ?</h1>
			<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
		</div>			
	</div>
</div>
 
CSS:-
#rotator { width: 920px; height: 280px; position: relative; background: white; padding: 20px; }
	 #block-1 { background: #d5fcff; }
	#block-2 { background: #e1ffd5; }
	#block-3 { background: #ffffd8; }
	#rotator > div { 
		position: absolute; 
		overflow: hidden;
		-webkit-transition: all 0.5s ease;
		-moz-transition: all 0.5s ease;
		-o-transition: all 0.5s ease;
	}
	#rotator .active { top: 20px; left: 20px; width: 580px; height: 280px; }
	#rotator .block2_content { top: 20px; left: 620px; height: 130px; width: 320px; }
	#rotator .block3_content { top: 170px; left: 620px; height: 130px; width: 320px; }
	#rotator h2 {
		text-align: center; 
		line-height: 130px;
	}
	#rotator .active h2 {
		display: none;
	}
 
JAVASCRIPT:-
function rotate() {
				
	if (current == 1) {
		$("#block-1").removeClass().addClass("active");
		$("#block-2").removeClass().addClass("block2_content");
		$("#block-3").removeClass().addClass("block3_content");
	} else if (current == 2) {
		$("#block-1").removeClass().addClass("block3_content");
		$("#block-2").removeClass().addClass("active");
		$("#block-3").removeClass().addClass("block2_content");
	} else {
		$("#block-1").removeClass().addClass("block2_content");
		$("#block-2").removeClass().addClass("block3_content");
		$("#block-3").removeClass().addClass("active");
	}
}
$("#rotator div").click(function() {
	current = this.id.substr(6);			
	rotate();
});
 
https://jsfiddle.net/cgx6o724/1/
                       
                    
0 Comment(s)