@leofavre/flip-card-component/dist/es/es5/view/FlipCardView.js

A flip card web component.

function _templateObject() {
  var data = _taggedTemplateLiteral(["\n  <style>\n    :host {\n  height: auto !important;\n  margin: 0 !important;\n  padding: 0 !important;\n  background: transparent !important;\n}\n\n.flip-card--wrapper {\n  position: relative;\n  display: block;\n  width: 100%;\n  height: 0;\n  padding-bottom: calc(1 / (var(--flip-card-proportion, 1/1)) * 100%);\n  perspective: var(--flip-card-perspective, 1200px);\n}\n\n.flip-card--surface {\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  transform-style: preserve-3d;\n  transition: transform var(--flip-card-speed, 0.32s) ease-in-out;\n}\n\n:host([revealed]) .flip-card--surface {\n  transform: rotateY(180deg);\n}\n\n.flip-card--side {\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  backface-visibility: hidden;\n  overflow: hidden;\n  border-radius: var(--flip-card-border-radius, 0px);\n  border: var(--flip-card-border, none);\n}\n\n.flip-card--side-back {\n  display: flex;\n  width: 100%;\n  height: 100%;\n  background: var(--flip-card-background, grey);\n}\n\n.flip-card--side-front {\n  transform: rotateY(-180deg);\n}\n\n  </style>\n  <div class=\"flip-card--wrapper\">\n    <div class=\"flip-card--surface\">\n      <div class=\"flip-card--side flip-card--side-front\"><slot></slot></div>\n      <div class=\"flip-card--side flip-card--side-back\"></div>\n    </div>\n  </div>\n"]);

  _templateObject = function _templateObject() {
    return data;
  };

  return data;
}

function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }

import { html } from '@leofavre/elmnt';
export default (function () {
  return html(_templateObject());
});