• 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

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.

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;

}

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>
 
Last edited by a moderator:

Malcolm

Administrator
Administrator
Verified
Hi there @Bob383510,

First things first, Just want to welcome you to CodeForum.ORG!

I have wrapped your code using the insert > code bbcode so that it's easier for people to use. And, I checked your code and appears to be working fine, when you hover over front it shows back. You can try using our code editor by heading to https://codeforum.org/CodePG/.
 

TopSilver

Active Coder
Community Partner
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.
 

TopSilver

Active Coder
Community Partner
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
 

Malcolm

Administrator
Administrator
Verified
Ahh okay, I tried it again with two browsers. I tried chrome first and it worked without any issues. When I tried FireFox; hovering over the showed both front and back text.
 

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.
 

TopSilver

Active Coder
Community Partner
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?

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);

}
 
Top Bottom