如何在Bootstrap框架中翻转图像？使用jquery或css

Question

图像应该在悬停时翻转，显示一些文本或链接：

<div class="clearfix visible-xs"></div>
      <div class="col-md-3 col-sm-3 col-xs-6">
        <div class="speaker-item animated hiding" data-animation="fadeInUp" data-delay="1000">
          <div class="img-wrapper">
            <img src="assets/img/speaker/speaker-3.jpg" class="img-responsive img-circle" alt="speaker-3" />
          </div>
          <div class="name">Brad Pitt</div>
          <div class="sub">CEO Yahoo</div>
          <p class="small">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
          <div class="social-link">
            <a href="#"><span class="fa fa-facebook"></span></a>
            <a href="#"><span class="fa fa-twitter"></span></a>
            <a href="#"><span class="fa fa-google-plus"></span></a>
          </div>
        </div>

Answer 1

​

body {
  background-color: #edebc4;
}
h1 {
  width: 50%;
  margin: 0 auto;
  text-align: center;
  font-family: arial;
  text-transform: uppercase;
}
.flip-container {
  position: absolute;
  perspective: 1000;
  top: 50%;
  left: 50%;
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}
.flip-container:hover .flipper,
.flip-container.hover .flipper {
  transform: rotateY(180deg);
}
.flip-container,
.flip-container .front,
.flip-container .back {
  -moz-border-radius: 100px;
  -webkit-border-radius: 100px;
  border-radius: 100px;
  width: 100px;
  height: 100px;
  overflow: hidden;
}
.flip-container .flipper {
  transition: 0.6s;
  transform-style: preserve-3d;
  position: relative;
}
.flip-container .flipper .front,
.flip-container .flipper .back {
  backface-visibility: hidden;
  position: absolute;
  top: 0;
  left: 0;
}
.flip-container .flipper .front {
  z-index: 2;
  transform: rotateY(0deg);
}
.flip-container .flipper .back {
  transform: rotateY(180deg);
}

<h1>Coin flip</h1>
<div class="flip-container" ontouchstart="this.classList.toggle('hover');">
  <div class="flipper">
    <div class="front">
      <img src="//lorempicsum.com/futurama/100/100/1" alt="" />
    </div>
    <div class="back">
      <img src="//lorempicsum.com/futurama/100/100/2" alt="" />
    </div>
  </div>
</div>

​