SOURCE

function Card(el) {
  this.$card = el;
  this.$flip = el.querySelector(".flip");
  this.$front = el.querySelector(".front");
  this.$back = el.querySelector(".back");
}

Card.prototype.flipToFront = function() {
  var that = this;

  this.$back.style.display = "block";
  this.$front.style.display = "none";

  this.$flip.classList.remove("flipToBack");
  this.$flip.classList.add("flipToFront");

  setTimeout(function() {
    that.$back.style.display = "none";
    that.$front.style.display = "block";
  },
  250);
};
Card.prototype.flipToBack = function() {
  var that = this;

  this.$front.style.display = "block";
  this.$back.style.display = "none";

  this.$flip.classList.remove("flipToFront");
  this.$flip.classList.add("flipToBack");

  setTimeout(function() {
    that.$front.style.display = "none";
    that.$back.style.display = "block";
  },
  250);
};

var ttt = new Card(document.querySelector(".card"));

$("button.flipToBack").on("click", function() {
  ttt.flipToBack();
});
$("button.flipToFront").on("click", function() {
  ttt.flipToFront();
})

<div class="card">
  <div class="flip">
    <div class="back">
      正正正正正正正正正正正正正正正
    </div>
    <div class="front">
      正正正正正正正正正正正正
    </div>
  </div>
</div>
<button class="flipToBack">
  flipToBack
</button>
<button class="flipToFront">
  flipToFront
</button>

.flip {
  width: 266px;
  height: 495px;
  transform-style: preserve-3d;
  &.flipToFront {
    animation-name: flipToFront;
    animation-duration: 500ms;
    animation-timing-function: ease-in-out;
    animation-delay: 0;
    animation-iteration-count: 1;
    animation-direction: normal;
    animation-fill-mode: none;
    animation-play-state: running;
  }
  &.flipToBack {
    transform: perspective(1280px) rotateY(-180deg);
    animation-name: flipToBack;
    animation-duration: 500ms;
    animation-timing-function: ease-in-out;
    animation-delay: 0;
    animation-iteration-count: 1;
    animation-direction: normal;
    animation-fill-mode: none;
    animation-play-state: running;
  }
}

.back {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  transform: rotateY(180deg);
  width: 100%;
  height: 100%;
  background-color: red;
  line-height: 495px;
  text-align: center;
}

.front {
  position: absolute;
  top: 0;
  left: 0;
  height: 495px;
  transform: rotateY(0deg);
  width: 100%;
  height: 100%;
  background-color: green;
  line-height: 495px;
  text-align: center;
}

@keyframes flipToBack {
  from {
    transform: perspective(1280px) rotateY(0)
  }
  to {
    transform: perspective(1280px) rotateY(-180deg)
  }
}

@keyframes flipToFront {
  from {
    transform: perspective(1280px) rotateY(-180deg)
  }
  to {
    transform: perspective(1280px) rotateY(0)
  }
}