@zohodesk/dot/lib/FlipCard/FlipCard.module.css

In this Library, we Provide Some Basic Components to Build Your Application

.flip,
.flipNone {
  color: var(--zdt_flipcard_default_text);
}.flip, .flipNone {
  background-color: var(--zdt_flipcard_default_bg);
}
.container {
  position: relative;
  transition: var(--zd_transition3) all;
  transform-style: preserve-3d;
}
.container,
.front,
.back {
  width: inherit ;
  height: inherit ;
}
.front,
.back {
  position: absolute;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
[dir=ltr] .front {
  transform: rotateY(180deg) perspective(1px);
}
[dir=rtl] .front {
  transform: rotateY(-180deg) perspective(1px);
}
.back {
  transform: rotateY(0deg) perspective(1px);
}
[dir=ltr] .notFlip .container {
  transform: rotateY(180deg);
}
[dir=rtl] .notFlip .container {
  transform: rotateY(-180deg);
}
[dir=ltr] .flip:hover .container, [dir=ltr] .hoverContainer:hover .container {
  transform: rotateY(180deg);
}
[dir=rtl] .flip:hover .container, [dir=rtl] .hoverContainer:hover .container {
  transform: rotateY(-180deg);
}