metro4/source/components/post-card/post-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";

@perspective: 1600px;

.post-card {

    display: flex;
    flex-flow: row nowrap;

    .left, .right {
        flex-shrink: 1;
        flex-grow: 1;
        flex-basis: 50%;
        width: 50%;
        height: 100%;
        overflow: hidden;
        backface-visibility: hidden;
        position: relative;
        transition: all @defaultAnimationSpeed linear;
    }

    .left {
        transform: perspective(@perspective) rotateY(25deg);
        transform-origin: right;
        border-right: 1px solid @light;
    }

    .right {
        transform: perspective(@perspective) rotateY(-25deg);
        transform-origin: left;
        border-left: 1px solid @light;
    }

    &.effect-on-hover:hover, &.effect-on-active.active {
        & > .left {
            transform: perspective(@perspective) rotateY(0);
        }
        & > .right {
            transform: perspective(@perspective) rotateY(-35deg);
        }

        &.rotate-to-left {
            & > .right {
                transform: perspective(@perspective) rotateY(0);
            }
            & > .left {
                transform: perspective(@perspective) rotateY(35deg);
            }
        }
    }
}