Link to the Card Flip program!
The card do get flipped but then when it turns over there is an error for a split second which disappears immediately.How am i supposed to remove that error? I guess the error is mostly occuring when the backface-visibility:hidden; is used.
*{margin:0px;
padding:0px;}
body{background:#000;}
/*SeaseOutBack:cubic-bezier(0.175,0.885,0.320,1.275);*/
.wrapper{
margin:11% 32%;
position:relative;
border:5px solid black;
width:390px;
height:360px;
perspective:800px;/*If u add some perspective to the container*/
}
.card{
width:100%;
height:100%;
position:absolute;
transition:-webkit-transform .7s cubic-bezier(0.175,0.885,0.320,1.275);/*Cubic ease giving a spring to it*/
transform-style:preserve-3d;/*2Settings...one show child elements as 3d and other as flat...so just make it always on*/
}
.card:hover{-webkit-transform:rotateY(-180deg);}When hovered it card flips
h2,h3{
font-family:"Arial Black", Gadget, sans-serif;
font-weight:300;
color:white;
text-transform:uppercase;
}
p{color:white;
}
.front{
border:15px solid white;
text-align:center;
width:360px;
height:330px;
position:absolute;
backface-visibility:hidden;/*I dont wanna see your back*/
}
.back{
border:15px solid red;
text-align:center;
font-weight:400;
width:360px;
height:330px;
position:absolute;/*We dont want block ar something, we want right inside div where it was supposed to be without considering other elements*/
backface-visibility:hidden;/*I dont wanna see your back*/
-webkit-transform:rotateY(180deg);/**/
}
h2,.back{ background: #F00943;
}
h3{
text-align:left;}
h2{ background:rgba(240, 9, 67, 0.8);
position: relative;
top:-80px;
padding:10px;
width:350px;
left:-5px;
}
<html xmlns="http://ift.tt/lH0Osb" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<!-- MOMENTS OF CHANGE:aka opportunities
<3 Easing, but where does it go
-Hiding/Revealing contents.(eg. Google+ flip the image to show likes & reshares)
-Cues & clues (with multiple 3d effect takin place dots give an idea about where we actually are)
-Demonstration.An animation is worth 5000 words? (When u hover,scale,inc size,see more contents,also it feels like it's closer to you!)
-Also,books (Crazy pop-up books)
-Surprise & delight. Instant sophistication through fun (Whhole screen changes to give a different content...just like phone)
-->
</head>
<body>
<div class="wrapper"> <!--Front & back are inside Card,Card is inside the Wrapper-->
<div class="card">
<div class="front">
<img src="http://ift.tt/1ELbVVy" height="330px" width="360px"/>
<h2>Miss Mittens</h2>
</div>
<div class="back"><br/><br/><br/>
<h3> Loves:</h3><br/>
<p>Strings, cuddles, and <br/>long naps in the sun.</p><br/>
<h3> Dislikes:</h3><br/>
<p>Bath, things that aren't sparkly and <br/>anything reassembling work.</p>
</div>
</div>
</div>
</body>
</html>
Aucun commentaire:
Enregistrer un commentaire