使用css閃爍很多的引導程式中的旋轉卡片影片

我有一個引導網站，在那里我做了一張卡片，它在懸停時顯示其背面。直播網站是這樣的：Live Site

本節代碼如下：

.niru {
  max-width: 2400px;
  width: 100%;
  margin: 0 auto;
}

.card-container {
  perspective: 1000px;
  position: relative;
  transform-style: preserve-3d;
  width: 100%;
  height: 380px;
}

.flip:hover {
  transform: rotateY(180deg);
}

.card {
  position: relative;
  transform-style: preserve-3d;
  max-width: 390px;
  width: 100%;
  height: 380px;
  transition: all 0.8s ease;
}

.front,
.back {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 380px;
  background: white;
  /* backface-visibility: hidden; */
  transform-style: preserve-3d;
  -webkit-box-shadow: 0px 7px 12px 1px rgba(0, 0, 0, 0.47);
  -moz-box-shadow: 0px 7px 12px 1px rgba(0, 0, 0, 0.47);
  box-shadow: 0px 7px 12px 1px rgba(0, 0, 0, 0.47);
  z-index: 2;
}

.front {
  transform: rotateY(0deg);
}

.back {
  transform: rotateY(-180deg);
}

.card-footer {
  margin: 0 auto;
}

.card-img-top {
  width: 100%
}

.card-body {
  padding-top: 20px;
  padding-left: 20px;
  padding-right: 20px;
}

.card-title {
  color: black
}

.card-text {
  font-weight: 800;
  font-size: 17px;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA 058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<section class="niru" style="background:black;">
  <div class="container">
    <div class="section-title">

      <h2 class="title" style="color:white;padding-top:2%">
        THE BEST FOLIO
      </h2>
    </div>
    <div class="row">
      <!-- Card 1 -->
      <div class="col-md-4 col-sm-6">
        <div class="card-container" style="height:210px">
          <div class="card flip " style="height:210px">
            <!-- Front -->
            <div class="front" style="height:210px">
              <div class="card-body">
                <p class="card-title">21-12-2021 / <a style="color:#fe3e6b">CREATIVE</a></p>
                <h3 class="card-text">Small project description goes here</h3>
              </div>
            </div>
            <!-- Back -->
            <div class="back" style="height:210px">
              <div class="card-body">
                <img class="card-img-top" src="https://picsum.photos/390/210?random=1">
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

  </div>

</section>

卡在懸停時閃爍很多。有時它甚至不顯示它的背面，只是閃爍。誰能告訴我這里出了什么問題？

uj5u.com熱心網友回復：

將懸停移到 card-container

.card-container:hover .flip{
  transform: rotateY(180deg);
}

.niru {
  max-width: 2400px;
  width: 100%;
  margin: 0 auto;
}

.card-container {
  perspective: 1000px;
  position: relative;
  transform-style: preserve-3d;
  width: 100%;
  height: 380px;
}

.card-container:hover .flip{
  transform: rotateY(180deg);
}

.card {
  position: relative;
  transform-style: preserve-3d;
  max-width: 390px;
  width: 100%;
  height: 380px;
  transition: all 0.8s ease;
}

.front,
.back {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 380px;
  background: white;
  /* backface-visibility: hidden; */
  transform-style: preserve-3d;
  -webkit-box-shadow: 0px 7px 12px 1px rgba(0, 0, 0, 0.47);
  -moz-box-shadow: 0px 7px 12px 1px rgba(0, 0, 0, 0.47);
  box-shadow: 0px 7px 12px 1px rgba(0, 0, 0, 0.47);
  z-index: 2;
}

.front {
  transform: rotateY(0deg);
}

.back {
  transform: rotateY(-180deg);
}

.card-footer {
  margin: 0 auto;
}

.card-img-top {
  width: 100%
}

.card-body {
  padding-top: 20px;
  padding-left: 20px;
  padding-right: 20px;
}

.card-title {
  color: black
}

.card-text {
  font-weight: 800;
  font-size: 17px;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA 058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<section class="niru" style="background:black;">
  <div class="container">
    <div class="section-title">

      <h2 class="title" style="color:white;padding-top:2%">
        THE BEST FOLIO
      </h2>
    </div>
    <div class="row">
      <!-- Card 1 -->
      <div class="col-md-4 col-sm-6">
        <div class="card-container" style="height:210px">
          <div class="card flip " style="height:210px">
            <!-- Front -->
            <div class="front" style="height:210px">
              <div class="card-body">
                <p class="card-title">21-12-2021 / <a style="color:#fe3e6b">CREATIVE</a></p>
                <h3 class="card-text">Small project description goes here</h3>
              </div>
            </div>
            <!-- Back -->
            <div class="back" style="height:210px">
              <div class="card-body">
                <img class="card-img-top" src="https://picsum.photos/390/210?random=1">
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

  </div>

</section>

標籤：

上一篇：iOS15.0中已棄用“影片”

下一篇：如何使影像在顫動中向上移動