.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; }