Флипкарта CSS с bootstrap 4 - PullRequest
Новая
       27

Флипкарта CSS с bootstrap 4

0 голосов
/ 15 апреля 2020

Я использую объединение различных постов здесь и учебник w3 c о том, как заставить флип-карты работать с bootstrap 4.

У меня это работает, за исключением обратной стороны высота как передняя сторона. (Я еще не добавил содержательный текст на обороте) Я уверен, что упускаю что-то вроде добавления H-100 где-то, но не могу понять, где я иду не так.

Может кто-нибудь из вас увидеть какие-либо проблемы в моем коде? 

<a href="" class="">
          <div class="card-flip">
            <div class="card-flip-inner">
              <div class="card-flip-front">
                <div class="card shadow-sm">
                  <div class="card-body">
                    <div class="row">
                      <div class="col text-center">
                        <i class="fas fa-route fa-3x text-msp-orange"></i>
                      </div>
                      <div class="col-10 text-right">
                        <h3 class="text-msp-darkblue text-uppercase mb-0"><b><?php echo $log->post_title; ?></b></h3>
                        <p class="text-secondary mt-0">
                          <?php echo $log->post_description; ?>
                        </p>
                      </div>
                    </div>
                    <hr />
                    <div class="row">
                      <div class="col">
                        <p class="text-secondary text-justify mb-0 pb-0">
                          <?php echo shortenEcho($log->post_body, 250); ?>
                        </p>
                        <span class="text-secondary float-right mt-0 pt-0"><?php echo date('D jS F Y', strtotime($log->post_createdOn)); ?></span>
                      </div>
                    </div>
                  </div>
                  <div class="card-footer">
                    <div class="row">
                      <div class="col-sm-12 col-md-12 col-lg-4 col-xl-4 text-center text-secondary card-vertical-divider">
                        <i class="fas fa-wind fa-2x text-msp-lightblue"></i><br />
                        <b>Force 4</b>
                      </div>
                      <div class="col-sm-12 col-md-12 col-lg-4 col-xl-4 text-center text-secondary card-vertical-divider">
                        <i class="fas fa-water fa-2x text-msp-lightblue"></i><br />
                        <b>Moderate</b>
                      </div>
                      <div class="col-sm-12 col-md-12 col-lg-4 col-xl-4 text-secondary text-center">
                        <i class="fas fa-cloud-sun fa-2x text-msp-lightblue"></i><br />
                        <b>Sunny</b>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="card-flip-back h-100">
                <div class="card shadow-sm bg-msp-lightblue">
                  <div class="card-body text-white h-100">
                    some text
                  </div>
                </div>
              </div>
            </div>
          </div>
      </a>

И мой CSS - это ... 

.card-flip {
  perspective: 1000px;
}

.card-flip-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transition: transform 0.8s;
  transform-style: preserve-3d;
  backface-visibility: hidden;
}

/* Do an horizontal flip when you move the mouse over the flip box container */
.card-flip:hover .card-flip-inner {
  transform: rotateY(180deg);
}

/* Position the front and back side */
.card-flip-front, .card-flip-back {
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden; /* Safari */
  backface-visibility: hidden;
}

/* Style the back side */
.card-flip-back {
  transform: rotateY(180deg);
  position: absolute;
  top: 0;
  left: 0;
}

ОБНОВЛЕНИЕ: Я думаю, что нашел ответ ...

Я добавил H От -100 до <div class="card h-100 shadow-sm"> А также до ... 

<div class="card-flip-back">
<div class="card shadow-sm h-100 bg-msp-lightblue">
<div class="card-body mx-auto text-white h-100">
some text
</div>
</div>

Просто нужно центрировать текст на карточке по вертикали сейчас и у нас все хорошо :-)

1 Ответ

0 голосов
/ 15 апреля 2020

CSS флип-карта с bootstrap 4 

.flip-card {
  width: 300px;
  height: 300px;
  perspective: 1000px;
  transition: 0.3s;
}

.flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.6s;
  transform-style: preserve-3d;
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
}

.flip-card:hover .flip-card-inner {
  transform: rotateY(180deg);
   box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
}

.flip-card-front, .flip-card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.flip-card-back {
  transform: rotateY(180deg);
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

<div class="flip-card">
  <div class="flip-card-inner">

    <div class="flip-card-front">
      <div class="card shadow-sm">
        <div class="card-flip-front">

          <div class="card shadow-sm">
            <div class="card-body">

              <div class="row">
                <div class="col text-center">
                  <i class="fas fa-route fa-3x text-msp-orange"></i>
                </div><!-- end col--> 
                <div class="col-10 text-right">
                  <h3 class="text-msp-darkblue text-uppercase mb-0"><b></b></h3>
                  <p class="text-secondary mt-0"> </p>
                </div><!-- end col-10--> 
              </div><!-- end row --> 
              <hr />

              <div class="row">
                <div class="col">
                  <p class="text-secondary text-justify mb-0 pb-0"> </p>
                  <span class="text-secondary float-right mt-0 pt-0"></span>
                </div><!-- end col--> 
              </div><!-- end row --> 

            </div><!-- end card body --> 

            <div class="card-footer">
              <div class="row">
                <div class="col-sm-12 col-md-12 col-lg-4 col-xl-4 text-center text-secondary card-vertical-divider">
                  <i class="fas fa-wind fa-2x text-msp-lightblue"></i><br />
                  <b>Force 4</b>
                </div><!-- end col-sm-12 col-md-12 col-lg-4 col-xl-4--> 
                <div class="col-sm-12 col-md-12 col-lg-4 col-xl-4 text-center text-secondary card-vertical-divider">
                  <i class="fas fa-water fa-2x text-msp-lightblue"></i><br />
                  <b>Moderate</b>
                </div><!-- end col-sm-12 col-md-12 col-lg-4 col-xl-4--> 
                <div class="col-sm-12 col-md-12 col-lg-4 col-xl-4 text-secondary text-center">
                  <i class="fas fa-cloud-sun fa-2x text-msp-lightblue"></i><br />
                  <b>Sunny</b>
                </div><!-- end col-sm-12 col-md-12 col-lg-4 col-xl-4--> 
              </div><!-- end row -->  
            </div><!-- end card footer --> 

          </div><!-- end card --> 

        </div><!-- end card flip front --> 
      </div><!-- end card --> 
    </div><!-- end card flip front --> 

    <div class="flip-card-back">
      <div class="card shadow-sm ">
        <div class="card-body text-dark h-100">
          some text
        </div><!-- end card body --> 
      </div><!-- end card --> 
    </div><!-- end card flip back --> 

  </div><!-- end card flip inner --> 
</div><!-- end card flip -->
...