CSS3: Card flip animation help?

HTML & CSS
1

Hello.
I’m very very new to html, css, js, and other languages.
I’m working on this card flip project and does not know what I did wrong.
problems: card images does not display in double sided.
Animation does not work.

I know that you can’t really resize the image using css, but was hoping to find a way to do so. Would it be possible to downsize the image without having to re-create the image?

HTML

<html>
<head>
<title>Name the Font</title>
<meta name="viewport" content="initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, width=device-width">
<script type="text/javascript" language="javascript" src="7_1_AN.js"></script>
<link rel="stylesheet" href="7_1_AN.js" media="screen"/>
</head>
<body>
<div id="container">
<div id="helvetica" class="helvetica" onclick="rotate(event)">
<div id="front" class="front face">
img src="new user can't post image"
</div>
<div id="back" class="back face">
img src="new user can't post image"
</div>
</div>
<div id="futura" class="futura" onclick="rotate2(event)">
<div id="front2" class="front face">
img src="new user can't post image"
</div>
<div id="back" class="back face">
img src="new user can't post image"
</div>
</div>
</div>
</html>

CSS

body 
{
  margin: 0px;
  -moz-user-select: none;
  background-color:#000;
}
#container
{
  height:600px;
  width: 600px;
  position: relative;
  -webkit-perspective:600;
  -webkit-tap-highlight-color: rgba(0,0,0,0)
}
.helvetica
{
  position: absolute;
  width:auto;
  max-width:50%;
  height:auto;
  -webkit-transform-style: preserve-3d;	
  -moz-transform-style: preserve-3d;	
  -webkit-transition-property: -webkit-transform;
  -moz-transition-property: -moz-transform;
  -webkit-transition-duration: 1.5s;
  -moz-transition-duration: 1.5s;
}
.futura
{
  position: absolute;
  width:auto;
  max-width:50%;
  height:auto;
  -webkit-transform-style: preserve-3d;	
  -moz-transform-style: preserve-3d;	
  -webkit-transition-duration: 1.5s;
  -moz-transition-duration: 1.5s;
}
.helvetica.flipped
{
  -webkit-transform: rotateY(180deg);
  -moz-transform: rotateY(180deg);
}
.futura.flipped
{
  -webkit-transform: rotateY(180deg);
  -webkit-animation-timing-fuction: ease-in;
  -moz-transform: rotateY(180deg);
  -moz-animation-timing-fuction: ease-in;
}
.face
{
  position: absolute;
  width:auto;
  max-width:50%;
  height:auto;
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
}
.face2
{
  position: absolute;
  width:auto;
  max-width:50%;
  height:auto;
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
}
.back 
{
  -webkit-transform: rotateY(180deg);
  -moz-transform: rotateY(180deg);
}
2

Hi,

I couldn’t really work out what you were trying to do with that code but here’s a basic flip animation that I got from somewhere (can’t remember where now).

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" >
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<title>Create a CSS Flipping Animation Example</title>
<style type="text/css">
/* simple */
.flip-container {
	-webkit-perspective: 1000;
	-moz-perspective: 1000;
	-ms-perspective: 1000;
	perspective: 1000;
	-ms-transform: perspective(1000px);
	-moz-transform: perspective(1000px);
	-moz-transform-style: preserve-3d;
	-ms-transform-style: preserve-3d;
	border: 1px solid #ccc;
}

/* START: Accommodating for IE */
.flip-container:hover .back, .flip-container.hover .back {
	-webkit-transform: rotateY(0deg);
	-moz-transform: rotateY(0deg);
	-o-transform: rotateY(0deg);
	-ms-transform: rotateY(0deg);
	transform: rotateY(0deg);
}
.flip-container:hover .front, .flip-container.hover .front {
	-webkit-transform: rotateY(180deg);
	-moz-transform: rotateY(180deg);
	-o-transform: rotateY(180deg);
	transform: rotateY(180deg);
}
/* END: Accommodating for IE */

.flip-container, .front, .back {
	width: 320px;
	height: 427px;
}
.flipper {
	-webkit-transition: 0.6s;
	-webkit-transform-style: preserve-3d;
	-ms-transition: 0.6s;
	-moz-transition: 0.6s;
	-moz-transform: perspective(1000px);
	-moz-transform-style: preserve-3d;
	-ms-transform-style: preserve-3d;
	transition: 0.6s;
	transform-style: preserve-3d;
	position: relative;
}
.front, .back {
	-webkit-backface-visibility: hidden;
	-moz-backface-visibility: hidden;
	-ms-backface-visibility: hidden;
	backface-visibility: hidden;
	-webkit-transition: 0.6s;
	-webkit-transform-style: preserve-3d;
	-webkit-transform: rotateY(0deg);
	-moz-transition: 0.6s;
	-moz-transform-style: preserve-3d;
	-moz-transform: rotateY(0deg);
	-o-transition: 0.6s;
	-o-transform-style: preserve-3d;
	-o-transform: rotateY(0deg);
	-ms-transition: 0.6s;
	-ms-transform-style: preserve-3d;
	-ms-transform: rotateY(0deg);
	transition: 0.6s;
	transform-style: preserve-3d;
	transform: rotateY(0deg);
	position: absolute;
	top: 0;
	left: 0;
}
.front {
	-webkit-transform: rotateY(0deg);
	-ms-transform: rotateY(0deg);
	background: lightgreen;
	z-index: 2;
}
.back {
	background: lightblue;
	-webkit-transform: rotateY(-180deg);
	-moz-transform: rotateY(-180deg);
	-o-transform: rotateY(-180deg);
	-ms-transform: rotateY(-180deg);
	transform: rotateY(-180deg);
}

		/* END: Accommodating for IE */
</style>
</head>
<body>
<h2>Just The Basics (Horizontal Flip)</h2>
<!-- card -->
<div class="flip-container" ontouchstart="this.classList.toggle('hover');">
		<div class="flipper">
				<div class="front"> front </div>
				<div class="back"> back </div>
		</div>
</div>
</body>
</html>
3

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.