@leofavre/flip-card-component/src/view/FlipCardView.js

A flip card web component.

import { html } from '@leofavre/elmnt';

export default () => html`
  <style>
    :host {
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
}

.flip-card--wrapper {
  position: relative;
  display: block;
  width: 100%;
  height: 0;
  padding-bottom: calc(1 / (var(--flip-card-proportion, 1/1)) * 100%);
  perspective: var(--flip-card-perspective, 1200px);
}

.flip-card--surface {
  position: absolute;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transition: transform var(--flip-card-speed, 0.32s) ease-in-out;
}

:host([revealed]) .flip-card--surface {
  transform: rotateY(180deg);
}

.flip-card--side {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  overflow: hidden;
  border-radius: var(--flip-card-border-radius, 0px);
  border: var(--flip-card-border, none);
}

.flip-card--side-back {
  display: flex;
  width: 100%;
  height: 100%;
  background: var(--flip-card-background, grey);
}

.flip-card--side-front {
  transform: rotateY(-180deg);
}

  </style>
  <div class="flip-card--wrapper">
    <div class="flip-card--surface">
      <div class="flip-card--side flip-card--side-front"><slot></slot></div>
      <div class="flip-card--side flip-card--side-back"></div>
    </div>
  </div>
`;