• Guest, before posting your code please take these rules into consideration:
    • It is required to use our BBCode feature to display your code. While within the editor click < / > or >_ and place your code within the BB Code prompt. This helps others with finding a solution by making it easier to read and easier to copy.
    • Don't share a wall of code. All we want is the problem area, the code related to your issue.


    To learn more about how to use our BBCode feature, please click here.

    Thank you, Code Forum.

HTML & CSS Code Confusion. Card Flip animation not showing back.

Bob383510

Bob383510

New Coder
I am trying to make this card effect flip and I have almost done it. The problem is that when the card flips to show the back there isn't any writing being shown.
Sometimes the work back will flicker and then go, but I have no idea why this is. Any help would be much appreciated thanks forks. I have fun the validator but there isn't any errors so I am a bit confused.

[CODE lang="css" title="CSS"].heading{

color: blue;

}

.card-container{

-webkit-perspective: 1000;



}

.card{

position: relative;

margin:20px;

background: #5677fc;

width: 200px;

height: 200px;

-webkit-transition: all 0.8s ease;

-webkit-transform-style: preserve-3d;



}

.card:hover{

-webkit-transform: rotateY(180deg);

}

.front,.back{

position: absolute;

width: 200px;

height: 200px;

-webkit-backface-visibility: hidden;



}



.back{

-webkit-transform: rotateY(180deg);

text-align-last: center;

}[/CODE]

[CODE lang="html" title="HTML"]<!DOCTYPE html>

<html lang="eu">

<head>

<meta charset="utf-8">

<link rel="stylesheet" type="text/css" href="flip.css">

<title> Card Flip</title>

</head>

<body>

<h1 class="heading"> Connection Check</h1>

<div class="card-container">

<div class="card">

<div class="front">

<h1> Front</h1>



<div class="back">

<h1> Back</h1>

</div>

</div>

</div>

</div>



</body>

</html>[/CODE]
 
Last edited by a moderator:
Sort by date Sort by votes
TopSilver

TopSilver

King Coder
If it doesn't work then possibly adding this would fix it.

CSS: 
.front, .back {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}

A trick many people don't know is if you have a parent that's relative and a child that's absolute you can use 0 on position elements to have it fit the container completely. Or if you wanted part of it to be offset you could change the number from 0 to something else. So since card is relative it would fit the card container. This works with elements that aren't just childs as well but I recommend a parent -> child type setup in most cases.
 
Upvote 0 Downvote
TopSilver

TopSilver

King Coder
Also I just realized you have the -webkit- prefix and not the actual transform property on it's own. Those prefixes are only meant for older versions of certain browsers. You still need transform on it's own for it to work in every single browser. Just letting you know why it wasn't working
 
Upvote 0 Downvote
Bob383510

Bob383510

New Coder
Thanks for all your help peps. The flip now shows the text back after the animation has occurred.
It only worked in Chrome once I add just the transform property with out -webkit-
I have also added -moz- but it doesn't show the text "back" is shows front revered.
I also used it with safari but no text is shown when the card flips at all.

ps.... I have tried other forums but no one get back to me, meaning I am so pleased that you folks helped me out.
 
Upvote 0 Downvote
TopSilver

TopSilver

King Coder
Bob383510 said:
Well I have found part of the answer, but I don't understand why it works on one browser but not the others even with the -moz- and -webkit- extensions?
Click to expand...

First I'd just like to say welcome to the site and I hope you stick around :D

To answer your questions it's quite simple and that's the fact that what your using there are called "vendor prefixes" you can do a quick google search to see what they are. They are meant so that older outdated browsers can still see it work.

You would need to also include a transform property on it's own like this:

CSS: 
.card:hover{
transform: rotateY(180deg);
    -webkit-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);

}
 
Upvote 0 Downvote
Top