vendure/docs/assets/styles/intro/_cube.scss

@import "variables";


.cube {
    width: calc(2 * var(--width-unit));
    height: calc(2 * var(--width-unit));
    transform-style: preserve-3d;
    transition: transform $transition-duration, margin $transition-duration, width $transition-duration, height $transition-duration;
}

.cube1 {
    transform: translateZ(calc(-1.75 * var(--width-unit)))
     translateX(calc(.25 * var(--width-unit))) 
     rotateY(45deg) ;
    z-index: 1;
} 

.cube2 {
    transform: rotateY(45deg);
}

.cube3 {
    transform: translateZ(calc(-1.75 * var(--width-unit)))
     translateX(calc(-.25 * var(--width-unit))) 
     rotateY(45deg);
}


.cube__face--top {
    background: var(--color-top);
    border: var(--front-border-width) var(--border-style) var(--border-color) !important;
}

.cube1 .cube__face--left {
    background-color: var(--color-left);
    border: var(--front-border-width) var(--border-style) var(--border-color);
}

.cube1 .cube__face--front {
    background-color: var(--color-shadow);
    border: var(--front-border-width) var(--border-style) var(--border-color);
}

.cube2 .cube__face--left {
    background-color: var(--color-left);
    border: var(--front-border-width) var(--border-style) var(--border-color);
}

.cube2 .cube__face--front {
    background-color: var(--color-right);
    border: var(--front-border-width) var(--border-style) var(--border-color);
}

.cube3 .cube__face--front {
    background-color: var(--color-right);
    border: var(--front-border-width) var(--border-style) var(--border-color);
}

.cube3 .cube__face--left {
    background-color: var(--color-shadow);
    border: var(--front-border-width) var(--border-style) var(--border-color);
}

.cube {
    &.show-front {
        transform: translateZ(calc(-1 * var(--width-unit))) rotateY( 0deg);
    }

    &.show-right {
        transform: translateZ(calc(-1 * var(--width-unit))) rotateY( -90deg);
    }

    &.show-back {
        transform: translateZ(calc(-1 * var(--width-unit))) rotateY(-180deg);
    }

    &.show-left {
        transform: translateZ(calc(-1 * var(--width-unit))) rotateY( 90deg);
    }

    &.show-top {
        transform: translateZ(calc(-1 * var(--width-unit))) rotateX( -90deg);
    }

    &.show-bottom {
        transform: translateZ(calc(-1 * var(--width-unit))) rotateX( 90deg);
    }
}

.cube__face {
    position: absolute;
    width: calc(2 * var(--width-unit));
    height: calc(2 * var(--width-unit));
    border: var(--border-width) var(--border-style) var(--border-color);
    transition: background-color $transition-duration;
    --projection: 1;
    &.cube__face--front {
        transform: rotateY( 0deg) translateZ(calc(var(--projection) * var(--width-unit)));
    }
    
    &.cube__face--right { 
        transform: rotateY( 90deg) translateZ(calc(var(--projection) * var(--width-unit)));
    }
    
    &.cube__face--back {
        transform: rotateY(180deg) translateZ(calc(var(--projection) * var(--width-unit)));
    }
    
    &.cube__face--left {
        transform: rotateY(-90deg) translateZ(calc(var(--projection) * var(--width-unit)));
    }
    
    &.cube__face--top { 
        transform: rotateX( 90deg) translateZ(calc(var(--projection) * var(--width-unit)));
    }
    
    &.cube__face--bottom {
        transform: rotateX(-90deg) translateZ(calc(var(--projection) * var(--width-unit)));
    }
}