Cards Flip Toggle

by Alen Subasic

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/awesome-bootstrap-checkbox/1.0.2/awesome-bootstrap-checkbox.min.css">
<div class="flex-row flex-wrap container-dashboard">
  <div class="dashboard-card card-1">
    <div class="dc-wrapper">
      <div class="dc-face dc-chart">
        chart
				<button class="btn btn-link btn-toggle-view">
				View Table
				</button>
      </div>
      <div class="dc-face dc-table">
        table
				<button class="btn btn-link btn-toggle-view">
				View Table
				</button>
      </div>
    </div>
    <!--<div class="checkbox">
      <input type="checkbox" id="something" class="toggle-view-chk styled" />
      <label for="something"></label>
    </div>-->
  </div>

  <div class="dashboard-card card-1">
    <div class="dc-wrapper">
      <div class="dc-face dc-chart">
        chart
      </div>
      <div class="dc-face dc-table">
        table
      </div>
    </div>
    <input type="checkbox" class="toggle-view-chk" />
  </div>

  <div class="dashboard-card card-1">
    <div class="dc-wrapper">
      <div class="dc-face dc-chart">
        chart
      </div>
      <div class="dc-face dc-table">
        table
      </div>
    </div>
    <input type="checkbox" class="toggle-view-chk" />
  </div>

  <div class="dashboard-card card-1">
    <div class="dc-wrapper">
      <div class="dc-face dc-chart">
        chart
      </div>
      <div class="dc-face dc-table">
        table
      </div>
    </div>
    <input type="checkbox" class="toggle-view-chk" />
  </div>

</div>

CSS

/*Flex Box*/
.flex-row {
  display: flex;
  flex-direction: row;
  width: 100%;
}

.flex-column {
  display: flex;
  flex-direction: column;
}

.flex-wrap {
  flex-wrap: wrap;
}

.flex-around {
  justify-content: space-around;
}

.flex-between {
  justify-content: space-between;
}

.flex-start {
  justify-content: flex-start;
}

.flex-end {
  justify-content: flex-end;
}

.flex-center {
  justify-content: center;
}

.card-1 {
  min-width: 300px;
  width: 22vw;
}


/* CUSTOM STYLES */
.container-dashboard {
  margin: 20px;
  perspective: 700px;
}

.dashboard-card {
  position: relative;
  min-height: 350px;
  margin: 15px;
}

.dc-wrapper {
  width: 100%;
  height: 100%;
  position: absolute;
  transform-style: preserve-3d;
  transition: transform 1.5s;
}

.dc-wrapper.flipped {
  transform: rotateY(180deg);
}

.dc-face {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  color: #000000;
  font-size: 24px;
  font-weight: 500;
  text-align: center;
  background: linear-gradient(180deg, #ffffff, #F4F6FF);
}

.dc-chart {
  box-shadow: 6px 6px 12px 0 rgba(25, 25, 25, 0.16), 0 4px 6px -2px rgba(25, 25, 26, 0.08);
}

.dc-table {
  transform: rotateY(180deg);
  box-shadow: 6px 6px 12px 0 rgba(25, 25, 25, 0.16), 0 4px 6px -2px rgba(25, 25, 26, 0.08);
}

/* Toggle Icons */
.btn-toggle-view {
	position: absolute;
	bottom: 5px;
	right: 5px;
}

.checkbox {
  position: absolute;
  bottom: 24px;
  right: 5px;
  cursor: pointer;
}

.checkbox label::before {
  content: "";
  display: inline-block;
  position: absolute;
  width: 21px;
  height: 20px;
  top: 4px;
  left: 0;
  margin-left: -18px;
  border: none;
  border-radius: 0px;
  background-color: transparent;
}

input[type="checkbox"].styled+label:after,
input[type="radio"].styled+label:after {
  font-size: 20px;
  font-family: 'FontAwesome';
  content: "\f0ce";
}

input[type="checkbox"].styled:checked+label:after,
input[type="radio"].styled:checked+label:after {
  font-family: 'FontAwesome';
...

JavaScript

const viewBtns = document.querySelectorAll('.btn-toggle-view');

viewBtns.forEach((item) => {
  item.addEventListener('click', function(e) {
    this.parentElement.parentElement.classList.toggle('flipped')
  });
});