<link href='https://fonts.googleapis.com/css?family=Open+Sans:400,600,700' rel='stylesheet' type='text/css'>
<a id="view-code" href="https://codepen.io/virgilpana/pen/RNYQwB" target="_blank">VIEW CODE</a>
<div id="make-3D-space">
<div id="product-card">
<div id="product-front">
<div class="shadow"></div>
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/245657/t-shirt.png" alt="" />
<div class="image_overlay"></div>
<div id="view_details">View details</div>
<div class="stats">
<div class="stats-container">
<span class="product_price">$39</span>
<span class="product_name">Adidas Originals</span>
<p>Men's running shirt</p>
<div class="product-options">
<strong>SIZES</strong>
<span>XS, S, M, L, XL, XXL</span>
<strong>COLORS</strong>
<div class="colors">
<div class="c-blue"><span></span></div>
<div class="c-red"><span></span></div>
<div class="c-white"><span></span></div>
<div class="c-green"><span></span></div>
</div>
</div>
</div>
</div>
</div>
<div id="product-back">
<div class="shadow"></div>
<div id="carousel">
<ul>
<li><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/245657/t-shirt-large.png" alt="" /></li>
<li><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/245657/t-shirt-large2.png" alt="" /></li>
<li><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/245657/t-shirt-large3.png" alt="" /></li>
</ul>
<div class="arrows-perspective">
<div class="carouselPrev">
<div class="y"></div>
<div class="x"></div>
</div>
<div class="carouselNext">
<div class="y"></div>
<div class="x"></div>
</div>
</div>
</div>
<div id="flip-back">
<div id="cy"></div>
<div id="cx"></div>
</div>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
/* Generals resets and unimportant stuff */
* { margin: 0px; padding: 0px; }
body {
background: #eaebec;
font-family: "Open Sans", sans-serif;
}
#view-code{
color:#48cfad;
font-size:14px;
text-transform:uppercase;
font-weight:700;
text-decoration:none;
position:absolute;top:640px; left:50%;margin-left:-35px;
}
#view-code:hover{color:#34c29e;}
/* --- Product Card ---- */
#make-3D-space{
position: relative;
perspective: 800px;
width:340px;
height:500px;
transform-style: preserve-3d;
transition: transform 5s;
position:absolute;
top:80px;
left:50%;
margin-left:-167px;
}
#product-front, #product-back{
width:335px;
height:500px;
background:#fff;
position:absolute;
left:-5px;
top:-5px;
-webkit-transition: all 100ms ease-out;
-moz-transition: all 100ms ease-out;
-o-transition: all 100ms ease-out;
transition: all 100ms ease-out;
}
#product-back{
display:none;
transform: rotateY( 180deg );
}
#product-card.animate #product-back, #product-card.animate #product-front{
top:0px;
left:0px;
-webkit-transition: all 100ms ease-out;
-moz-transition: all 100ms ease-out;
-o-transition: all 100ms ease-out;
transition: all 100ms ease-out;
}
#product-card{
width:325px;
height:490px;
position:absolute;
top:10px;
left:10px;
overflow:hidden;
transform-style: preserve-3d;
-webkit-transition: 100ms ease-out;
-moz-transition: 100ms ease-out;
-o-transition: 100ms ease-out;
transition: 100ms ease-out;
}
div#product-card.flip-10{
-webkit-transform: rotateY( -10deg );
-moz-transform: rotateY( -10deg );
-o-transform: rotateY( -10deg );
transform: rotateY( -10deg );
transition: 50ms ease-out;
}
div#product-card.flip90{
-webkit-transform: rotateY( 90deg );
-moz-transform: rotateY( 90deg );
-o-transform: rotateY( 90deg );
transform: rotateY( 90deg );
transition: 100ms ease-in;
}
div#product-card.flip190{
-webkit-transform: rotateY( 190deg );
-moz-transform: rotateY( 190deg );
-o-transform: rotateY( 190deg );
transform: rotateY( 190deg );
transition: 100ms ease-out;
}
div#product-card.flip180{
-webkit-transform: rotateY( 180deg );
-moz-transform: rotateY( 180deg );
-o-transform: rotateY( 180deg );
transform: rotateY( 180deg );
transition: 150ms ease-out;
}
#product-card.animate{
top:5px;
left:5px;
width:335px;
height:500px;
box-shadow:0px 13px 21px -5px rgba(0, 0, 0, 0.3);
-webkit-transition: 100ms ease-out;
-moz-transition: 100ms ease-out;
-o-transition: 100ms ease-out;
transition: 100ms ease-out;
}
.stats-container{
background:#fff;
position:absolute;
top:386px;
left:0;
width:265px;
height:300px;
padding:27px 35px 35px;
-webkit-transition: all 200ms ease-out;
-moz-transition: all 200ms ease-out;
-o-transition: all 200ms ease-out;
transition: all 200ms ease-out;
}
#product-card.animate .stats-container{
top:272px;
-webkit-transition: all 200ms ease-out;
-moz-transition: all 200ms ease-out;
-o-transition: all 200ms ease-out;
transition: all 200ms ease-out;
}
.stats-container .product_name{
font-size:22px;
color:#393c45;
}
.stats-container p{
font-size:16px;
color:#b1b1b3;
padding:2px 0 20px 0;
}
.stats-container .product_price{
float:right;
color:#48cfad;
font-size:22px;
font-weight:600;
}
.image_overlay{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
background:#48daa1;
opacity:0;
}
#product-card.animate .image_overlay{
opacity:0.7;
-webkit-transition: all 200ms ease-out;
-moz-transition: all 200ms ease-out;
-o-transition: all 200ms ease-out;
transition: all 200ms ease-out;
}
.product-options{
padding:2px 0 0;
}
.product-options strong{
font-weight:700;
color:#393c45;
font-size:14px;
}
.product-options span{
color:#969699;
font-size:14px;
display:block;
margin-bottom:8px;
}
#view_details{
position:absolute;
top:112px;
left:50%;
margin-left:-85px;
border:2px solid #fff;
color:#fff;
font-size:19px;
text-align:center;
text-transform:uppercase;
font-weight:700;
padding:10px 0;
width:172px;
opacity:0;
-webkit-transition: all 200ms ease-out;
-moz-transition: all 200ms ease-out;
-o-transition: all 200ms ease-out;
transition: all 200ms ease-out;
}
#view_details:hover{
background:#fff;
color:#48cfad;
cursor:pointer;
}
#product-card.animate #view_details{
opacity:1;
width:152px;
font-size:15px;
margin-left:-75px;
top:115px;
-webkit-transition: all 200ms ease-out;
-moz-transition: all 200ms ease-out;
-o-transition: all 200ms ease-out;
transition: all 200ms ease-out;
}
div.colors div{
margin-top:3px;
width:15px;
height:15px;
margin-right:5px;
float:left;
}
div.colors div span{
width:15px;
height:15px;
display:block;
border-radius:50%;
}
div.colors div span:hover{
width:17px;
height:17px;
margin:-1px 0 0 -1px;
}
div.c-blue span{background:#6e8cd5;}
div.c-red span{background:#f56060;}
div.c-green span{background:#44c28d;}
div.c-white span{
background:#fff;
width:14px;
height:14px;
border:1px solid #e8e9eb;
}
div.shadow{
width:335px;height:520px;
opacity:0;
position:absolute;
top:0;
left:0;
z-index:3;
display:none;
background: -webkit-linear-gradient(left,rgba(0,0,0,0.1),rgba(0,0,0,0.2));
background: -o-linear-gradient(right,rgba(0,0,0,0.1),rgba(0,0,0,0.2));
background: -moz-linear-gradient(right,rgba(0,0,0,0.1),rgba(0,0,0,0.2));
background: linear-gradient(to right, rgba(0,0,0,0.1), rgba(0,0,0,0.2));
}
#product-back div.shadow{
z-index:10;
opacity:1;
background: -webkit-linear-gradient(left,rgba(0,0,0,0.2),rgba(0,0,0,0.1));
background: -o-linear-gradient(right,rgba(0,0,0,0.2),rgba(0,0,0,0.1));
background: -moz-linear-gradient(right,rgba(0,0,0,0.2),rgba(0,0,0,0.1));
background: linear-gradient(to right, rgba(0,0,0,0.2), rgba(0,0,0,0.1));
}
#flip-back{
position:absolute;
top:20px;
right:20px;
width:30px;
height:30px;
cursor:pointer;
}
#cx, #cy{
background:#d2d5dc;
position:absolute;
width:0px;
top:15px;
right:15px;
height:3px;
-webkit-transition: all 250ms ease-in-out;
-moz-transition: all 250ms ease-in-out;
-ms-transition: all 250ms ease-in-out;
-o-transition: all 250ms ease-in-out;
transition: all 250ms ease-in-out;
}
#flip-back:hover #cx, #flip-back:hover #cy{
background:#979ca7;
-webkit-transition: all 250ms ease-in-out;
-moz-transition: all 250ms ease-in-out;
-ms-transition: all 250ms ease-in-out;
-o-transition: all 250ms ease-in-out;
transition: all 250ms ease-in-out;
}
#cx.s1, #cy.s1{
right:0;
width:30px;
-webkit-transition: all 100ms ease-out;
-moz-transition: all 100ms ease-out;
-ms-transition: all 100ms ease-out;
-o-transition: all 100ms ease-out;
transition: all 100ms ease-out;
}
#cy.s2{
-ms-transform: rotate(50deg);
-webkit-transform: rotate(50deg);
transform: rotate(50deg);
-webkit-transition: all 100ms ease-out;
-moz-transition: all 100ms ease-out;
-ms-transition: all 100ms ease-out;
-o-transition: all 100ms ease-out;
transition: all 100ms ease-out;
}
#cy.s3{
-ms-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
-webkit-transition: all 100ms ease-out;
-moz-transition: all 100ms ease-out;
-ms-transition: all 100ms ease-out;
-o-transition: all 100ms ease-out;
transition: all 100ms ease-out;
}
#cx.s1{
right:0;
width:30px;
-webkit-transition: all 100ms ease-out;
-moz-transition: all 100ms ease-out;
-ms-transition: all 100ms ease-out;
-o-transition: all 100ms ease-out;
transition: all 100ms ease-out;
}
#cx.s2{
-ms-transform: rotate(140deg);
-webkit-transform: rotate(140deg);
transform: rotate(140deg);
-webkit-transition: all 100ms ease-out;
-moz-transition: all 100ms ease-out;
-ms-transition: all 100ease-out;
-o-transition: all 100ms ease-out;
transition: all 100ms ease-out;
}
#cx.s3{
-ms-transform: rotate(135deg);
-webkit-transform: rotate(135deg);
transform: rotate(135deg);
-webkit-transition: all 100ease-out;
-moz-transition: all 100ms ease-out;
-ms-transition: all 100ms ease-out;
-o-transition: all 100ms ease-out;
transition: all 100ms ease-out;
}
#carousel{
width:335px;
height:500px;
overflow:hidden;
position:relative;
}
#carousel ul{
position:absolute;
top:0;
left:0;
}
#carousel li{
width:335px;
height:500px;
float:left;
overflow:hidden;
}
.arrows-perspective{
width:335px;
height:55px;
position: absolute;
top: 218px;
transform-style: preserve-3d;
transition: transform 5s;
perspective: 335px;
}
.carouselPrev, .carouselNext{
width: 50px;
height: 55px;
background: #ccc;
position: absolute;
top:0;
transition: all 200ms ease-out;
opacity:0.9;
cursor:pointer;
}
.carouselNext{
top:0;
right: -26px;
-webkit-transform: rotateY( -117deg );
-moz-transform: rotateY( -117deg );
-o-transform: rotateY( -117deg );
transform: rotateY( -117deg );
transition: all 200ms ease-out;
}
.carouselNext.visible{
right:0;
opacity:0.8;
background: #efefef;
-webkit-transform: rotateY( 0deg );
-moz-transform: rotateY( 0deg );
-o-transform: rotateY( 0deg );
transform: rotateY( 0deg );
transition: all 200ms ease-out;
}
.carouselPrev{
left:-26px;
top:0;
-webkit-transform: rotateY( 117deg );
-moz-transform: rotateY( 117deg );
-o-transform: rotateY( 117deg );
transform: rotateY( 117deg );
transition: all 200ms ease-out;
}
.carouselPrev.visible{
left:0;
opacity:0.8;
background: #eee;
-webkit-transform: rotateY( 0deg );
-moz-transform: rotateY( 0deg );
-o-transform: rotateY( 0deg );
transform: rotateY( 0deg );
transition: all 200ms ease-out;
}
#carousel .x, #carousel .y{
height:2px;
width:15px;
background:#48cfad;
position:absolute;
top:31px;
left:17px;
-ms-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
#carousel .x{
-ms-transform: rotate(135deg);
-webkit-transform: rotate(135deg);
transform: rotate(135deg);
top:21px;
}
#carousel .carouselNext .x{
-ms-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
#carousel .carouselNext .y{
-ms-transform: rotate(135deg);
-webkit-transform: rotate(135deg);
transform: rotate(135deg);
}
$(document).ready(function(){
// Lift card and show stats on Mouseover
$('#product-card').hover(function(){
$(this).addClass('animate');
$('div.carouselNext, div.carouselPrev').addClass('visible');
}, function(){
$(this).removeClass('animate');
$('div.carouselNext, div.carouselPrev').removeClass('visible');
});
// Flip card to the back side
$('#view_details').click(function(){
$('div.carouselNext, div.carouselPrev').removeClass('visible');
$('#product-card').addClass('flip-10');
setTimeout(function(){
$('#product-card').removeClass('flip-10').addClass('flip90').find('div.shadow').show().fadeTo( 80 , 1, function(){
$('#product-front, #product-front div.shadow').hide();
});
}, 50);
setTimeout(function(){
$('#product-card').removeClass('flip90').addClass('flip190');
$('#product-back').show().find('div.shadow').show().fadeTo( 90 , 0);
setTimeout(function(){
$('#product-card').removeClass('flip190').addClass('flip180').find('div.shadow').hide();
setTimeout(function(){
$('#product-card').css('transition', '100ms ease-out');
$('#cx, #cy').addClass('s1');
setTimeout(function(){$('#cx, #cy').addClass('s2');}, 100);
setTimeout(function(){$('#cx, #cy').addClass('s3');}, 200);
$('div.carouselNext, div.carouselPrev').addClass('visible');
}, 100);
}, 100);
}, 150);
});
// Flip card back to the front side
$('#flip-back').click(function(){
$('#product-card').removeClass('flip180').addClass('flip190');
setTimeout(function(){
$('#product-card').removeClass('flip190').addClass('flip90');
$('#product-back div.shadow').css('opacity', 0).fadeTo( 100 , 1, function(){
$('#product-back, #product-back div.shadow').hide();
$('#product-front, #product-front div.shadow').show();
});
}, 50);
setTimeout(function(){
$('#product-card').removeClass('flip90').addClass('flip-10');
$('#product-front div.shadow').show().fadeTo( 100 , 0);
setTimeout(function(){
$('#product-front div.shadow').hide();
$('#product-card').removeClass('flip-10').css('transition', '100ms ease-out');
$('#cx, #cy').removeClass('s1 s2 s3');
}, 100);
}, 150);
});
/* ---- Image Gallery Carousel ---- */
var carousel = $('#carousel ul');
var carouselSlideWidth = 335;
var carouselWidth = 0;
var isAnimating = false;
// building the width of the casousel
$('#carousel li').each(function(){
carouselWidth += carouselSlideWidth;
});
$(carousel).css('width', carouselWidth);
// Load Next Image
$('div.carouselNext').on('click', function(){
var currentLeft = Math.abs(parseInt($(carousel).css("left")));
var newLeft = currentLeft + carouselSlideWidth;
if(newLeft == carouselWidth || isAnimating === true){return;}
$('#carousel ul').css({'left': "-" + newLeft + "px",
"transition": "300ms ease-out"
});
isAnimating = true;
setTimeout(function(){isAnimating = false;}, 300);
});
// Load Previous Image
$('div.carouselPrev').on('click', function(){
var currentLeft = Math.abs(parseInt($(carousel).css("left")));
var newLeft = currentLeft - carouselSlideWidth;
if(newLeft < 0 || isAnimating === true){return;}
$('#carousel ul').css({'left': "-" + newLeft + "px",
"transition": "300ms ease-out"
});
isAnimating = true;
setTimeout(function(){isAnimating = false;}, 300);
});
});