Dream Of Code: Source code for Google like card flip .

//Code for card flip.
//Create a html file and copy paste the code in it .Run it in a browser (preferably chrome/safari)
//Click on the broken image on the top right of the card for the card to flip over
// Video link : https://youtu.be/7N5E_LLa2Jw

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
</head>
<body bgcolor="black">
<style>
.card {
position:absolute;
left: 30%;
top:35%;
padding: 1.5%;
width: 38%;
background: white;
border-radius: 7px;
}
@keyframes fly-in-from-left-info-front {
from {
transform: rotateY(180deg);
-webkit-transform-origin: 50% 50%;
-moz-transform-origin: 50% 50%;
-o-transform-origin: 50% 50%;
transform-origin: 50% 50%;
opacity:0;
}
}

@keyframes fly-in-from-left-info-front {
from {
transform: rotateY(180deg);
-webkit-transform-origin: 50% 50%;
-moz-transform-origin: 50% 50%;
-o-transform-origin: 50% 50%;
transform-origin: 50% 50%;
opacity:0;
}
}

@-webkit-keyframes fly-in-from-left-info-front {
from {
-webkit-transform:rotateY(180deg);
-webkit-transform-origin: 50% 50%;
-moz-transform-origin: 50% 50%;
-o-transform-origin: 50% 50%;
transform-origin: 50% 50%;
opacity:0;
}
}

@keyframes fly-in-from-right-info-back {
from {
transform:rotateY(180deg);
-webkit-transform-origin: 50% 50%;
-moz-transform-origin: 50% 50%;
-o-transform-origin: 50% 50%;
transform-origin: 50% 50%;
opacity:0;
}
}

@-webkit-keyframes fly-in-from-right-info-back {
from {
-webkit-transform:rotateY(180deg);
-webkit-transform-origin: 50% 50%;
-moz-transform-origin: 50% 50%;
-o-transform-origin: 50% 50%;
transform-origin: 50% 50%;
opacity:0;
}
}

</style>
<script>
function infostart() {
var animatorfront = document.querySelector("#card1");
var animatorback = document.querySelector("#card1info");
animatorback.style.height=$('#card1').css('height');
document.getElementById('card1').style.display = 'none';
animatorback.style.animation = "fly-in-from-right-info-back .3s linear";
animatorback.style.webkitAnimation = "fly-in-from-right-info-back .3s linear";
document.getElementById('card1info').style.display = 'block';
}
function infoend(){
document.getElementById('card1info').style.display='none';
var animatorfront=document.querySelector("#card1");
var animatorback=document.querySelector("#card1info");
animatorfront.style.animation="fly-in-from-left-info-front .3s linear";
animatorfront.style.webkitAnimation="fly-in-from-left-info-front .3s linear";
document.getElementById('card1').style.display='block';

}
</script>
<section id="card1" class="card" onload="linegraph();">
<div class="cardinfoicon" align="right" onclick="infostart()"><a href="javascript:void(0)"><img id="info" src="img/info1.png"> </a></div>
<center>Front</center><br></div>
</section>
<section id="card1info" onclick="infoend()" class="card" style="display:none">
<div>
<div class="cardinfoicon" align="right"><a href="javascript:void(0)" target="_self"><img src="img/info1.png"></a></div>
<center>Back</center><br></div>

</section>
</body>
</html>

Dream Of Code

Monday 2 November 2015

Source code for Google like card flip .

No comments:

Post a Comment