@mixin cubeFlipUp($selector: ".flipUp", $duration: 0.5s, $delay: 0s, $timing: cubic-bezier(0.905, -0.190, 0.480, 0.995)) {
    position: relative;
    @include u-prefix(transform-style, preserve-3d, webkit spec);
    @include u-transition(all $duration $delay $timing);
    &#{$selector} {
        @include u-transform(rotateX(-90deg) translateY(100%) translateZ(0));
        @include u-prefix(transform-origin, 50% 100%, webkit moz spec);
    }
    &::before,
    &::after {
        content: '';
        position: absolute;
        left: 0;
        height: 100%;
        width: 100%;
    }
    &::before {
        top: 100%;
        @include u-transform(rotateX(-90deg));
        @include u-prefix(transform-origin, 0 0, webkit moz spec);
    }
    &::after {
        top: -100%;
        @include u-transform(rotateX(90deg));
        @include u-prefix(transform-origin, 0 100%, webkit moz spec);
    }
}

@mixin cubeFlipDown($selector: ".flipDown", $duration: 0.5s, $delay: 0s, $timing: cubic-bezier(0.905, -0.190, 0.480, 0.995)) {
    position: relative;
    @include u-prefix(transform-style, preserve-3d, webkit spec);
    @include u-transition(all $duration $delay $timing);
    &#{$selector} {
        @include u-transform(rotateX(90deg) translateY(-100%) translateZ(0));
        @include u-prefix(transform-origin, 50% 0, webkit moz spec);
    }
    &::before,
    &::after {
        content: '';
        position: absolute;
        left: 0;
        height: 100%;
        width: 100%;
    }
    &::before {
        top: 100%;
        @include u-transform(rotateX(-90deg));
        @include u-prefix(transform-origin, 0 0, webkit moz spec);
    }
    &::after {
        top: -100%;
        @include u-transform(rotateX(90deg));
        @include u-prefix(transform-origin, 0 100%, webkit moz spec);
    }
}