I love the css flipcard transformation they did at premium.wpmudev.org/blog/how-to-create-a-wordpress-post-list-wonderwall-the-card-flipper/ (concept from queness). So I adapted it on my site (it looks great), but I really have trouble adapting it for cross-browser-compatibility. (IE and Opera are not displaying it right according to browserstack).
Can anybody help me tweak the code that it is replaced on browsers where it cannot run and runs on all browsers that support 3D CSS transformations? That would be a great help!
The guys at brainstormforce have done it quite well in their flipcard plugin. But I can´t spot the solution for my implementation...
You find my code in a jsfiddle - slightly cleaned, just to see the function working: http://jsfiddle.net/X49EK/
HTML: in jsfiddle
The CSS:
.thumb {
/* display:block; - to be able to use display:hidden in parent for responsiveness */
position:relative;
margin-bottom:20px;
margin-right:20px;
float:left;
width:200px;
height:200px;
}
.thumb-wrapper {
display:block;
width:100%;
height:100%;
}
/* Front */
.thumb .thumb-front {
width:100%;
height:100%;
position:absolute;
display:block;
background:#ff3030;
color:#ffffff;
border-color:#ffffff;
padding-top:50px;
}
/* Back */
.thumb .thumb-detail {
display:block;
width:100%;
height:100%;
position:absolut;
background:#ffffff;
left:0;
top:0;
border-width:1px; !important;
border-color:#ff6600; !important;
border-style:solid;
padding:15px;
}
/* Back Header */
.thumb .thumb-detail-header {
font-size: 16px;!important;
margin-bottom:5px;
text-align:left;
}
/* Back Text */
.thumb .thumb-detail, .thumb .thumb-detail p {
font-size: 13px;!important;
color: #595959;!important;
line-height: 1.4em;!important;
text-align:justify;
}
/*
* Without CSS3
*/
.thumb.scroll {
overflow: hidden;
}
.thumb.scroll .thumb-detail {
bottom:-400px;
}
/*
* CSS3 Flip
*/
.thumb.flip {
-webkit-perspective:800px;
-moz-perspective:800px;
-ms-perspective:800px;
-o-perspective:800px;
perspective:800px;
}
.thumb.flip .thumb-wrapper {
-webkit-transition: -webkit-transform 1s;
-moz-transition: -moz-transform 1s;
-ms-transition: -moz-transform 1s;
-o-transition: -moz-transform 1s;
transition: -moz-transform 1s;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
transform-style: preserve-3d;
}
.thumb.flip .thumb-detail {
-webkit-transform: rotateY(-180deg);
-moz-transform: rotateY(-180deg);
-ms-transform: rotateY(-180deg);
-o-transform: rotateY(-180deg);
transform: rotateY(-180deg);
}
.thumb.flip .thumb-front,
.thumb.flip .thumb-detail {
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-ms-backface-visibility: hidden;
-o-backface-visibility: hidden;
backface-visibility: hidden;
}
.thumb.flip .flipIt {
-webkit-transform: rotateY(-180deg);
-moz-transform: rotateY(-180deg);
-ms-transform: rotateY(-180deg);
-o-transform: rotateY(-180deg);
transform: rotateY(-180deg);
}
The Javascript (for cross-browser compatibility, uses Modernizr):
$(function () {
if ($('html').hasClass('csstransforms3d')) {
$('.thumb').removeClass('scroll').addClass('flip');
$('.thumb.flip').hover(
function () {
$(this).find('.thumb-wrapper').addClass('flipIt');
},
function () {
$(this).find('.thumb-wrapper').removeClass('flipIt');
}
);
} else {
$('.thumb').hover(
function () {
$(this).find('.thumb-detail').stop().animate({bottom:0}, 500, 'easeOutCubic');
},
function () {
$(this).find('.thumb-detail').stop().animate({bottom: ($(this).height() * -1) }, 500, 'easeOutCubic');
}
);
}
});
