CSS3有关变换动画的问题

Question

I am learning CSS3 features these days. I try to implement an effect of card flipping . (jsfiddle)

Here is the code.

html, body{
    margin: 0;
    padding: 0;
    background-color: #ccc;
}

.container{
    position: relative;
    width: 300px;
    height: 500px;
    margin: 5% auto;
    perspective: 500px;
}

#card{
    width: 100%;
    height: 100%;
    background-color: #567890;
    -webkit-animation: flip 1s;
    transform-style: preserve-3d;
    position: relative;
}

@-webkit-keyframes flip{
    0% { transform: rotateY(0deg); }
    100% { transform: rotateY(180deg); }
}

.front, .back{
    position: absolute;
    backface-visibility: hidden;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
}

#card .front {
  background: red;
}
#card .back {
  background: blue;
  transform: rotateY( 180deg );
}

And HTML.

<div class="container">
    <div id="card">
        <figure class="front">1</figure>
        <figure class="back">2</figure>
    </div>
/div>

Here are the problems.

1. The div has two sides, front and back. The transition should be from front side to back side. But in this program, front side returns.

2. Front side and back side's position are not right. They should be inside the div card.

Can someone help me? Many thanks!

Answer 1

instead of rotating you .card why don't you rotate the front and back div vice versa

JS Fiddle

added keyframes for front and back div to rotate

@-webkit-keyframes front {
    0% {
        transform: rotateY(0deg);
    }
    100% {
        transform: rotateY(180deg);
    }
}
@-webkit-keyframes back {
    0% {
        transform: rotateY(-180deg);
    }
    100% {
        transform: rotateY(0deg);
    }
}