Flip Carousel

flip-carousel.markdown

Flip Carousel

A Pen by David Ollerhead on CodePen.

License.

index.html

<div class="stage">
	<div class="tiles">
		<div class="tile">
			#4
		</div>
		<div class="tile">
			#3
		</div>
		<div class="tile">
			#2
		</div>
		<div class="tile active">
			#1
		</div>
	</div>
</div>

script.js

setInterval(function(){ 
	var elem = $('.tile')
				.first()
				.addClass('prev')
				.detach()
				.appendTo('.tiles');

		$('.tiles .active').removeClass('active');
			
		_.delay(function() {
			elem
				.removeClass('prev')
				.addClass('active');
		}, 10);
}, 1000);

scripts

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>

style.scss

body {
	background: #c0c;
}

* {
	box-sizing: border-box;
}

.stage {
	height: 200px;
	margin: 10px auto;
	perspective: 800px;
	position: relative;
	width: 200px;
	padding: 30px;
	border-radius: 10px;
	background-color: white;
	
}

.tiles {
	height: 100%;
	// position: absolute;
	transform-style: preserve-3d;
	width: 100%;
}

.tile {
	display: flex;
	align-items: center;
	justify-content: center;
	// text-align: center;
	font-size: 100px;
	line-height: 1;
	backface-visibility: hidden;
	// background-color: #ddd;
	// border-radius: 2px;
	// border: 1px solid #ccc;
	height: 100%;
	// padding: 8px;
	position: absolute;
	transition: transform .5s ease-out;
	transform: rotateY(180deg);
	width: 100%;
	
	&.active {
		transform: rotateY(0deg);
	}
	&.prev {
		transform: rotateY(-180deg);
	}
}