metro4/source/components/flip-card/flip-card.less

The front-end framework for Build responsive, mobile-first projects on the web with the first front-end component library in Metro Style

@import (once) "../../include/vars";
@import (once) "../../include/mixins";

.flip-card {

    .front, .back {
        width: 100%;
        height: 100%;
        overflow: hidden;
        backface-visibility: hidden;
        position: absolute;
        transition: transform @defaultAnimationSpeed linear;
        top: 0;
        left: 0;
    }

    .front {
        transform: perspective(@defaultPerspective) rotateY(0deg);
    }

    .back {
        transform: perspective(@defaultPerspective) rotateY(180deg);
    }

    &.flip-horizontal {
        .front {
            transform: perspective(@defaultPerspective) rotateX(0deg);
        }

        .back {
            transform: perspective(@defaultPerspective) rotateX(180deg);
        }
    }

    &.effect-on-hover:hover, &.effect-on-active.active {
        & > .front {
            transform: perspective(@defaultPerspective) rotateY(-180deg);
        }
        & > .back {
            transform: perspective(@defaultPerspective) rotateY(0deg);
        }

        &.flip-horizontal {
            & > .front {
                transform: perspective(@defaultPerspective) rotateX(-180deg);
            }
            & > .back {
                transform: perspective(@defaultPerspective) rotateX(0deg);
            }
        }
    }
}