Сделайте переворот карты Bootstrap 4 при наведении курсора

У меня есть панель управления Bootstrap 4 и HTML5, которую я создаю, и я пытаюсь отображать каждую карту, переворачивая ее для отображения дополнительной информации при наведении кнопки «i».

У меня работает флип-часть, но я не могу заставить работать следующее:

Отображение дополнительной информации о флипе (на данный момент все, что он делает, это переворачивает мой первый вид)
Кажется, что карта перемещается, когда она перевернута влево

У меня есть этот рабочий пример с использованием моих HTML и CSS, которые у меня есть в настоящее время.

// Our labels along the x-axis
var month = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];

// For drawing the lines
var exampleChart = [0, 114, 106, 106, 107, 111, 133, 221, 783, 2478, 2485, 654];


var ext = document.getElementById("exampleChart");
var exampleChart = new Chart(ext, {
    type: 'line',
    data: {
        labels: month,
        datasets: [
            {
                data: exampleChart,
                borderColor: "#155724",
                pointBackgroundColor: '#155724',
                pointBorderWidth: '0',
                pointRadius: '4'
            }
        ]
    },
    options: {
        scales: {
            yAxes: [
                {
                    gridLines: {
                        // color: '#000',
                        display: false
                    },
                    ticks: {
                        display: false // This will remove only the label
                    }
                }
            ],
            xAxes: [
                {
                    gridLines: {
                        display: false
                    },
                    ticks: {
                        display: false // This will remove only the label
                    }
                }
            ]
        },
        legend: {
            display: false
        },
        tooltips: {
            callbacks: {
                title: function () { }
            }
        },
        layout: {
            padding: {
                left: 0,
                right: 10,
                top: 5,
                bottom: 0
            }
        }
    }
});

Я бы предпочел не использовать jQuery, но если я это сделаю, то я бы хотел, чтобы на верхней карте было какое-то растворение, и чтобы оно снова появлялось при перемещении.

Как уже было сказано, я бы хотел, чтобы он переворачивался только при наведении курсора на значок «i».

вы проверили w3school w3schools.com/howto/howto_css_flip_card.asp

— 26.07.2019 12:39

@SoubhagyaKumar Да, я посмотрел на это. Вот где начальная; код исходит из моего файла

— 26.07.2019 14:31

jquery html css bootstrap-4

26.07.2019 12:18

Как конвертировать HTML в PDF с помощью jsPDF

В этой статье мы рассмотрим, как конвертировать HTML в PDF с помощью jsPDF. Здесь мы узнаем, как конвертировать HTML в PDF с помощью javascript.

5 323

Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Я заметил следующие ошибки:

 - Remove your added custom CSS properties (.dashboardCardHeadingRow, .card, .card-icon)
 - Check the HTML syntax (the "flip-card-inner" div will not be closed until the end)

// Our labels along the x-axis
var month = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];

// For drawing the lines
var exampleChart = [0, 114, 106, 106, 107, 111, 133, 221, 783, 2478, 2485, 654];


var ext = document.getElementById("exampleChart");
var exampleChart = new Chart(ext, {
    type: 'line',
    data: {
        labels: month,
        datasets: [
            {
                data: exampleChart,
                borderColor: "#155724",
                pointBackgroundColor: '#155724',
                pointBorderWidth: '0',
                pointRadius: '4'
            }
        ]
    },
    options: {
        scales: {
            yAxes: [
                {
                    gridLines: {
                        // color: '#000',
                        display: false
                    },
                    ticks: {
                        display: false // This will remove only the label
                    }
                }
            ],
            xAxes: [
                {
                    gridLines: {
                        display: false
                    },
                    ticks: {
                        display: false // This will remove only the label
                    }
                }
            ]
        },
        legend: {
            display: false
        },
        tooltips: {
            callbacks: {
                title: function () { }
            }
        },
        layout: {
            padding: {
                left: 0,
                right: 10,
                top: 5,
                bottom: 0
            }
        }
    }
});

.flip-card {
  background-color: transparent;
  width: 300px;
  height: 200px;
  border: 1px solid #f1f1f1;
  perspective: 1000px; /* Remove this if you don't want the 3D effect */
}

/* This container is needed to position the front and back side */
.flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.8s;
  transform-style: preserve-3d;
}

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

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

/* Style the front side (fallback if image is missing) */
.flip-card-front {
  background-color: #bbb;
  color: black;
}

/* Style the back side */
.flip-card-back {
  background-color: dodgerblue;
  color: white;
  transform: rotateY(180deg);
}

<script src = "https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.min.js"></script>
<link href = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel = "stylesheet"/>
<link href = "https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel = "stylesheet"/>

<div class = "form-group row">
  <div class = "col-4">
    <div class = "flip-card">
      <div class = "flip-card-inner">
        <div class = "flip-card-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 = "fas 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-card-back">
        <div class = "card">
          <div class = "card-body">
            <div class = "form-group row" style = "height: 150px">
              <h1>John Doe</h1>
              <p>Architect & Engineer</p>
              <p>We love that guy</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
</div>

jsFiddle

Надеюсь, информация была полезной.

26.07.2019 15:15

Ответ принят как подходящий

Используйте это и настройте его под свои нужды:

.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>

26.07.2019 16:01

Другие вопросы по теме

Аккордеон начальной загрузки по умолчанию отображается на рабочем столе и скрывается по умолчанию на мобильном устройстве

Простая проблема гибкости - почему элементы гибкости не имеют одинакового размера без установки основы гибкости

Как ссылаться на пакеты после переноса кода на html и javascript

Нужно иметь границу вокруг кучи тегов div

Перенаправление после даты и времени symfony

Как вызвать функцию с выводом двух других функций?

Не удается отправить успешный запрос для создания записи в базе данных в PHP

Как прокручивать HTML DOM вверх и вниз без window.scrollBy(x, y) (мне нужно прокручивать элемент вниз)

Сгенерировать JSON из HTML-формы

Должны ли интерфейсы пользователя и администратора быть разделены в коде (отдельные классы) или ненужные функции должны быть скрыты через css

Сделайте переворот карты Bootstrap 4 при наведении курсора

Ответы 2

Другие вопросы по теме

Похожие вопросы