Animation How to - Create CSS3 flip animate

Question

We would like to know how to create CSS3 flip animate.

Answer


<!DOCTYPE html>
<html>
<head>
<style type='text/css'>
body {<!-- www.java2  s .c  o  m-->
  text-align: center;
}

.flipper {
  width: 300px;
  height: 100px;
  line-height: 100px;
  font-size: 30px;
  font-weight: bold;
  color: #444;
  text-align: center;
  margin: 0 auto;
}

.flip-front {
  background: #666;
  color: #FFF;
  width: 300px;
  height: 100px;
}

.flip-back {
  background: #CCC;
  color: #666;
  width: 300px;
  height: 100px;
}
.flipper {
  position: relative;
  -webkit-perspective: 700;
  overflow: visible;
}

.flip-front {
  -webkit-transform-style: preserve- 3 d;
  -webkit-backface-visibility: hidden;
  -webkit-transition: all ease-in-out 0.4s;
  z-index: 900;
}

.flip-back {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 800;
  -webkit-transform: rotatey(-180deg);
  -webkit-transform-style: preserve- 3 d;
  -webkit-backface-visibility: hidden;
  -webkit-transition: all ease-in-out 0.4s;
  opacity: 0;
}

.flipper:hover .flip-front {
  z-index: 900;
  -webkit-transform: rotatey(180deg);
  opacity: 0;
}

.flipper:hover .flip-back {
  z-index: 1000;
  -webkit-transform: rotatey(0deg);
  opacity: 1;
}
</style>
</head>
<body>
  <div class="flipper">
    <div class="flip-front">AAA</div>
    <div class="flip-back">BBB</div>
  </div>
</body>
</html>

The code above is rendered as follows: