Cross-Browser Flip Card

Size
2,396 Kb
Views
16,192

How do I make an cross-browser flip card?

A GSAP powered cross-browser 3D flip card sample.Basically it uses two different elements that are animated at the same time to create the flip card, without using preserve-3d which is not supported by IE.. What is a cross-browser flip card? How do you make a cross-browser flip card? This script and codes were developed by Rodrigo Hernando on 18 November 2022, Friday.

Cross-Browser Flip Card Previews

Cross-Browser Flip Card - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Cross-Browser Flip Card</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div id="mainWrap">
<div class="cardCont"> <div class="cardBack"></div> <div class="cardFront"></div>
</div>
<div class="cardCont"> <div class="cardBack"></div> <div class="cardFront"></div>
</div>
<div class="cardCont"> <div class="cardBack"></div> <div class="cardFront"></div>
</div>
</div>
<div style="clear:both;"></div>
<div id="mainWrap" style="margin-top:10px;">
<div class="cardCont"> <div class="cardBack playcardBack"></div> <div class="cardFront playcardFront"></div>
</div>
<div class="cardCont"> <div class="cardBack playcardBack"></div> <div class="cardFront playcardFront"></div>
</div>
<div class="cardCont"> <div class="cardBack playcardBack"></div> <div class="cardFront playcardFront"></div>
</div>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.1/TweenMax.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Cross-Browser Flip Card - Script Codes CSS Codes

body
{ background:#444;
}
.cardCont
{ width:250px; height:400px; float:left; margin-right:10px; position:relative; /*border:solid 2px #fff;*/
}
.cardFront, .cardBack
{ position:absolute; width:250px; height:400px; background:url('https://s.cdpn.io/33073/lorempixel.jpg'); backface-visibility: hidden; -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; -ms-backface-visibility: hidden;
}
.cardBack
{ background:url('https://s.cdpn.io/33073/lorempixe1l.jpg');
}
.playcardFront
{ background:url("http://unlimitedpotentialnow.com/wp-content/uploads/2012/01/Bouquet-cs.jpg");
}
.playcardBack
{ background:url("http://i203.photobucket.com/albums/aa158/Comic1111/ACe.png");
}

Cross-Browser Flip Card - Script Codes JS Codes

CSSPlugin.defaultTransformPerspective = 1000;
//we set the backface
TweenMax.set($(".cardBack"), {rotationY:-180});
$.each($(".cardCont"), function(i,element) {	var frontCard = $(this).children(".cardFront"), backCard = $(this).children(".cardBack"), tl = new TimelineMax({paused:true});	tl	.to(frontCard, 1, {rotationY:180})	.to(backCard, 1, {rotationY:0},0)	.to(element, .5, {z:50},0)	.to(element, .5, {z:0},.5);	element.animation = tl;
});
$(".cardCont").hover(elOver, elOut);
function elOver() { this.animation.play();
}
function elOut() { this.animation.reverse();
}
Cross-Browser Flip Card - Script Codes
Cross-Browser Flip Card - Script Codes
Home Page Home
Developer Rodrigo Hernando
Username rhernando
Uploaded November 18, 2022
Rating 4
Size 2,396 Kb
Views 16,192
Do you need developer help for Cross-Browser Flip Card?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Rodrigo Hernando (rhernando) Script Codes
Create amazing love letters with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!