Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Flip Carousel
<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>
setInterval(function(){
var elem = $('.tile')
.first()
.addClass('prev')
.detach()
.appendTo('.tiles');
$('.tiles .active').removeClass('active');
_.delay(function() {
elem
.removeClass('prev')
.addClass('active');
}, 10);
}, 1000);
<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>
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);
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment