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]
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: