flip-card-wc/src/style.css

Flip Card Web Component

:host {
  display: block; }

.flip-card {
  position: relative;
  perspective: 100rem;
  height: var(--flip-card-height, 100px); }
  .flip-card__side {
    height: var(--flip-card-height, 100px);
    transition: all var(--flip-card-transition-duration, 800ms) var(--flip-card-transition-timing-function, ease);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    backface-visibility: hidden;
    border-radius: var(--flip-card-border-radius, 4px);
    overflow: hidden;
    box-shadow: var(--flip-card-box-shadow, 0 15px 40px rgba(0, 0, 0, 0.15)); }
    .flip-card__side--front {
      background-color: var(--flip-card-background-color-front, white); }
    .flip-card__side--back {
      background-color: var(--flip-card-background-color-back, white);
      transform: rotateY(180deg); }
  .flip-card:hover .flip-card__side--front.hover {
    transform: rotateY(-180deg); }
  .flip-card:hover .flip-card__side--back.hover {
    transform: rotateY(0); }

.clicked--front {
  transform: rotateY(-180deg); }

.clicked--back {
  transform: rotateY(0); }