Automatically flip a div in angularJS

Question

Can anyone give me an example of on how to flip a div vertically so it can reveal other side content automatically?

Answer 1

You can achieve that with CSS transitions.

The following is an extract from this post. It demonstrates flipping a div vertically (or horizontally) on mouse hover.

/* entire container, keeps perspective */

.flip-container {
  perspective: 1000;
  transform-style: preserve-3d;
}
/* flip the pane when hovered */

.flip-container:hover .back {
  transform: rotateY(0deg);
}
.flip-container:hover .front {
  transform: rotateY(180deg);
}
.flip-container,
.front,
.back {
  width: 320px;
  height: 480px;
}
/* flip speed goes here */

.flipper {
  transition: 0.6s;
  transform-style: preserve-3d;
  position: relative;
}
/* hide back of pane during swap */

.front,
.back {
  backface-visibility: hidden;
  transition: 0.6s;
  transform-style: preserve-3d;
  position: absolute;
  top: 0;
  left: 0;
}
/*  UPDATED! front pane, placed above back */

.front {
  z-index: 2;
  transform: rotateY(0deg);
}
/* back, initially hidden pane */

.back {
  transform: rotateY(-180deg);
}
/* 
 Some vertical flip updates 
*/

.vertical.flip-container {
  position: relative;
}
.vertical .back {
  transform: rotateX(180deg);
}
.vertical.flip-container:hover .back {
  transform: rotateX(0deg);
}
.vertical.flip-container:hover .front {
  transform: rotateX(180deg);
}
/* Set backround */

.front {
  background-color: blue;
}
.back {
  background-color: red;
}

<div class="vertical flip-container" ontouchstart="this.classList.toggle('hover');">
  <div class="flipper">
    <div class="front">
      Front
      <!-- front content -->
    </div>
    <div class="back">
      BACK
      <!-- back content -->
    </div>
  </div>
</div>

Note that CSS transitions are not supported by older browsers. You can find a complete list of supported browsers here.

I hope this helps.