Price slider
HTML
<span class="left-view-cart">View Cart</span>
CSS
@import url(http://fonts.googleapis.com/css?family=Source+Sans+Pro:200,300,400,600,900);
@import url(http://fonts.googleapis.com/css?family=Anonymous+Pro);
@import url(http://fonts.googleapis.com/css?family=Exo:300,800);
* {
margin:0px;
padding:0px;
}
.cube {
position:relative;
width:500px;
height:60px;
margin:5rem auto;
-webkit-transform-style:preserve-3d;
-moz-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-perspective:400px;
-moz-perspective: 400px;
-ms-perspective: 400px;
-o-perspective: 400px;
perspective: 400px;
}
/* positions */
.a, .b, .c, .d {
position:absolute;
width:50%;
height:100%;
left:0px;
z-index:222;
}
.a:before, .b:before, .c:before, .d:before, .a:after, .b:after {
content:'';
position:absolute;
top:0px;
left:0px;
width:500px;
height:60px;
}
.a:before, .b:before, .c:before, .d:before {
z-index:111;
}
.a:after, .b:after {
z-index:333;
}
.b {
top:0px;
-webkit-transform:rotateX(75deg) translateY(-60px);
-moz-transform: rotateX(75deg) translateY(-60px);
-o-transform: rotateX(75deg) translateY(-60px);
-ms-transform: rotateX(75deg) translateY(-60px);
transform: rotateX(75deg) translateY(-60px);
-webkit-transform-origin:0% 0%;
-moz-transform-origin: 0% 0%;
-o-transform-origin: 0% 0%;
-ms-transform-origin: 0% 0%;
transform-origin: 0% 0%;
}
.c {
top:0px;
-webkit-transform:rotateX(75deg);
-moz-transform: rotateX(75deg);
-o-transform: rotateX(75deg);
-ms-transform: rotateX(75deg);
transform: rotateX(75deg);
-webkit-transform-origin:100% 100%;
-moz-transform-origin: 100% 100%;
-o-transform-origin: 100% 100%;
-ms-transform-origin: 100% 100%;
transform-origin: 100% 100%;
}
.d {
-webkit-transform:translateZ(-60px) translateY(-15px);
-moz-transform: translateZ(-60px)...