悬停进行Bootstrap 4卡翻转

Question

我有一个正在创建的Bootstrap 4和HTML5仪表板，我正在尝试card显示每个显示的内容，当将“ i”按钮悬停在上方时，翻转显示其他信息。

我的键盘盖工作正常，但似乎无法正常工作：

• 在翻盖上显示其他信息（目前所做的只是翻开我的第一个视图）
• 向左翻转时，似乎在移动卡

我正在用我的小提琴html，css目前

我希望不必使用，JQuery但是如果我愿意，那么我想在顶卡上溶解一下，并使其从移动时重新出现。

如前所述，我只希望将鼠标悬停在“ i”图标上时进行翻转

Answer 1

使用它并根据您的需要进行调整：

.flip_container {
  width: 100%;
  height: 450px;
  cursor: pointer;
}
.flip_container:hover .flip {
  -webkit-transform: rotateY(180deg);
  transform: rotateY(180deg);
}
.flip {
  -webkit-transition: 0.75s;
  transition: 0.75s;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
  position: relative;
  height: 100%;
}
.flip_front,
.flip_back {
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  position: absolute;
  top: 0;
  left: 0;
}
.flip_front {
  -webkit-transform: rotateY(0deg);
  transform: rotateY(0deg);
}
.flip_back {
  -webkit-transform: rotateY(180deg);
  transform: rotateY(180deg);
  padding: 10px;
  background: #fff;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100%;
}

<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


<div class="container">
  <div class="row">
    <div class="col-sm-12 col-md-6 col-lg-4 flip_container">
      <div class="flip">
        <div class="flip_front">
           <div class="card">
            <div class="card-body">
                <div class="form-group row">
                    <div class="col-11">
                        <div class="alert-success card-icon">
                          <div class="chartjs-size-monitor">
                            <div class="chartjs-size-monitor-expand">
                              <div class=""></div>
                            </div>
                            <div class="chartjs-size-monitor-shrink">
                              <div class=""></div>
                            </div>
                          </div>
                          <canvas id="exampleChart" class="chartjs-render-monitor" width="400" height="200" style="display: block; width: 400px; height: 200px;"></canvas>
                        </div>
                    </div>
                    <div class="col-1">
                        <i id="extInfoIcon" class="fa fa-info-circle fa-4x text-info" style="cursor: pointer"></i>
                    </div>
                </div>
                <div class="form-group row dashboardCardHeadingRow">
                    <div class="col-12">
                        <div class="card-subtitle text-muted">Card Footer</div>
                    </div>
                </div>
                <div class="row text-center">
                    <div class="col-6">
                        <div class="card-subtitle text-muted">Heading 1</div>
                        <h4 class="mb-0">0</h4>
                    </div>
                    <div class="col-6">
                        <div class="card-subtitle text-muted">Heading 2</div>
                        <h4 class="mb-0">0</h4>
                    </div>
                </div>
            </div>
          </div>
        </div>
        <div class="flip_back w-100">
          <div class="card">
          <div class="card-body">
            <div class="form-group p-5">
              <h1 class="m-0">John Doe</h1>
              <p class="m-0">Architect & Engineer</p>
              <p class="m-0">We love that guy</p>
            </div>
          </div>
        </div>
        </div>
      </div>
    </div>
  </div>
</div>