.carousel {
position:relative;
padding:20px;
-webkit-perspective:500px;
perspective:500px;
overflow:hidden;
display:-webkit-box;
display:-ms-flexbox;
display:flex;
-webkit-box-orient:vertical;
-webkit-box-direction:normal;
-ms-flex-direction:column;
flex-direction:column;
-webkit-box-align:center;
-ms-flex-align:center;
align-items:center;
}
.carousel > * {
-webkit-box-flex:0;
-ms-flex:0 0 auto;
flex:0 0 auto;
}
.carousel figure {
margin:0;
width:60%;
height:100%;
-webkit-transform-style:preserve-3d;
transform-style:preserve-3d;
-webkit-transition:-webkit-transform 0.5s;
transition:-webkit-transform 0.5s;
transition:transform 0.5s;
transition:transform 0.5s,-webkit-transform 0.5s;
}
.carousel figure img {
display:inline-block;
width:100%;
height:100%;
box-sizing:border-box;
padding:0 0px;
cursor:pointer;
background-size:100% 100%;
}
.carousel figure img:not(:first-of-type) {
position:absolute;
left:0;
top:0;
}
.nav {
position:absolute;
width:44px;
height:44px;
background:#ddd;
top:calc(50% - 22px);
cursor:pointer;
}
div.next {
right:0px;
background-position:right top;
}
div.prev {
left:0px;
}