Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

JavaScript

Babel is required to process package imports. If you need a different preprocessor remove all packages first.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                div.house#h 
    
    div.shadows
        div.shadow-a
        div.shadow-b
    //-----------------------
    //-----------------------
    div.al
        div.al__front.face 
        div.al__back.face 
        div.al__right.face 
        div.al__left.face 
        div.al__top.face 
        div.al__bottom.face 
    div.ab
        div.ab__front.face 
        div.ab__back.face 
        div.ab__right.face 
        div.ab__left.face 
        div.ab__top.face 
        div.ab__bottom.face 
    div.at
        div.at__front.face 
        div.at__back.face 
        div.at__right.face 
        div.at__left.face 
        div.at__top.face 
        div.at__bottom.face 
    div.ac
        div.ac__front.face 
        div.ac__back.face 
        div.ac__right.face 
        div.ac__left.face 
        div.ac__top.face 
        div.ac__bottom.face                 
    //-----------------------
    //-----------------------
    div.bce
        div.bce__front.face 
        div.bce__back.face 
        div.bce__right.face 
        div.bce__left.face 
        div.bce__top.face 
        div.bce__bottom.face 
    div.bci
        div.bci__front.face 
        div.bci__back.face 
        div.bci__right.face 
        div.bci__left.face 
        div.bci__top.face 
        div.bci__bottom.face 
    div.bl
        div.bl__front.face 
        div.bl__back.face 
        div.bl__right.face 
        div.bl__left.face 
        div.bl__top.face 
        div.bl__bottom.face 
    div.bt
        div.bt__front.face 
        div.bt__back.face 
        div.bt__right.face 
        div.bt__left.face 
        div.bt__top.face 
        div.bt__bottom.face 
    div.bbe
        div.bbe__front.face 
        div.bbe__back.face 
        div.bbe__right.face 
        div.bbe__left.face 
        div.bbe__top.face 
        div.bbe__bottom.face 
    div.bbi
        div.bbi__front.face 
        div.bbi__back.face 
        div.bbi__right.face 
        div.bbi__left.face 
        div.bbi__top.face 
        div.bbi__bottom.face  
        
    //-----------------------
    //-----------------------
    div.cl
        div.cl__front.face 
            div.lamp
        div.cl__back.face 
        div.cl__right.face   
        div.cl__left.face 
        div.cl__top.face 
        div.cl__bottom.face    
    div.cc
        div.cc__front.face 
        div.cc__back.face 
        div.cc__right.face 
        div.cc__left.face 
        div.cc__top.face 
        div.cc__bottom.face    
    div.ccl
        div.ccl__front.face 
        div.ccl__back.face 
        div.ccl__right.face 
        div.ccl__left.face 
        div.ccl__top.face 
        div.ccl__bottom.face    
    div.cml
        div.cml__front.face 
        div.cml__back.face 
        div.cml__right.face 
        div.cml__left.face 
        div.cml__top.face 
        div.cml__bottom.face    
    div.cmr
        div.cmr__front.face 
        div.cmr__back.face 
        div.cmr__right.face 
        div.cmr__left.face 
        div.cmr__top.face 
        div.cmr__bottom.face    
    div.cmt
        div.cmt__front.face 
        div.cmt__back.face 
        div.cmt__right.face 
        div.cmt__left.face 
        div.cmt__top.face 
        div.cmt__bottom.face    
    //-----------------------
    //-----------------------
                
    div.dl
        div.dl__front.face 
        div.dl__back.face 
        div.dl__right.face 
        div.dl__left.face 
        div.dl__top.face 
        div.dl__bottom.face        
    div.dm
        div.dm__front.face 
        div.dm__back.face 
        div.dm__right.face 
        div.dm__left.face 
        div.dm__top.face 
        div.dm__bottom.face        
    div.dt
        div.dt__front.face 
        div.dt__back.face 
        div.dt__right.face 
        div.dt__left.face 
        div.dt__top.face 
        div.dt__bottom.face   
    //-----------------------            
    //-----------------------   
         
    div.el: div.el__front.face
    div.ec: div.ec__front.face
    div.er: div.er__right.face
    div.eb: div.eb__back.face
    //-----------------------            
    //-----------------------            
    div.fl
        div.fl__front.face 
        div.fl__back.face 
        div.fl__right.face 
        div.fl__left.face 
        div.fl__top.face 
        div.fl__bottom.face   
    div.ft
        div.ft__front.face 
        div.ft__back.face 
        div.ft__right.face 
        div.ft__left.face 
        div.ft__top.face 
        div.ft__bottom.face   
    div.fb
        div.fb__front.face 
        div.fb__back.face 
        div.fb__right.face 
        div.fb__left.face 
        div.fb__top.face 
        div.fb__bottom.face   
 
    //-----------------------
    //-----------------------
    div.table
        div.table__front.face 
        div.table__back.face 
        div.table__right.face 
        div.table__left.face 
        div.table__top.face 
        div.table__bottom.face 
            div.foot
                div.foot__front.face 
                div.foot__back.face 
                div.foot__right.face 
                div.foot__left.face 
                div.foot__top.face 
                div.foot__bottom.face 
            div.foot
                div.foot__front.face 
                div.foot__back.face 
                div.foot__right.face 
                div.foot__left.face 
                div.foot__top.face 
                div.foot__bottom.face 
            div.foot
                div.foot__front.face 
                div.foot__back.face 
                div.foot__right.face 
                div.foot__left.face 
                div.foot__top.face 
                div.foot__bottom.face 
            div.foot
                div.foot__front.face 
                div.foot__back.face 
                div.foot__right.face 
                div.foot__left.face 
                div.foot__top.face 
                div.foot__bottom.face 
    div.kitchen
        div.kitchen__front.face 
        div.kitchen__back.face 
        div.kitchen__right.face 
        div.kitchen__left.face 
        div.kitchen__top.face 
        div.kitchen__bottom.face 
    div.couch
        div.couch__front.face 
        div.couch__back.face 
        div.couch__right.face 
        div.couch__left.face 
        div.couch__top.face 
        div.couch__bottom.face 
    div.couchb
        div.couchb__front.face 
        div.couchb__back.face 
        div.couchb__right.face 
        div.couchb__left.face 
        div.couchb__top.face 
        div.couchb__bottom.face 
    div.couchc
        div.couchc__front.face 
        div.couchc__back.face 
        div.couchc__right.face 
        div.couchc__left.face 
        div.couchc__top.face 
        div.couchc__bottom.face 
    div.couchd
        div.couchd__front.face 
        div.couchd__back.face 
        div.couchd__right.face 
        div.couchd__left.face 
        div.couchd__top.face 
        div.couchd__bottom.face 
    div.picture
        div.picture__front.face 
        div.picture__back.face 
        div.picture__right.face 
        div.picture__left.face 
        div.picture__top.face 
        div.picture__bottom.face 
    div.door-r
        div.door-r__front.face 
        div.door-r__back.face 
        div.door-r__right.face 
        div.door-r__left.face 
        div.door-r__top.face 
        div.door-r__bottom.face 
    div.door-l
        div.door-l__front.face 
        div.door-l__back.face 
        div.door-l__right.face 
        div.door-l__left.face 
        div.door-l__top.face 
        div.door-l__bottom.face 
    div.door-b
        div.door-b__front.face 
        div.door-b__back.face 
        div.door-b__right.face 
        div.door-b__left.face 
        div.door-b__top.face 
        div.door-b__bottom.face 
    div.door-t
        div.door-t__front.face 
        div.door-t__back.face 
        div.door-t__right.face 
        div.door-t__left.face 
        div.door-t__top.face 
        div.door-t__bottom.face 
    
              
            
!

CSS

              
                $bg-1: #C6C5E1;
$bg-2: #686688;


$white-1: #fbfbfb;
$white-2: #f2f2f2;
$white-3: #c4c2d6;
$white-4: #675D6E;

$water-1: #7095c9;
$water-2: #6187be;
$water-3: #4d6d98;
$water-4: #234062;

$light-1: #def5f1;
$light-2: #badfd9;

$cta-1: #90AACE;
$cta-2: darken($cta-1, 10);
$cta-3: darken($cta-2, 10);


/***********************/
/***********************/
@mixin cube($width, $height, $depth) {
    &__front{ @include cube-front($width, $height, $depth); }
    &__back{ @include cube-back($width, $height, $depth); }
    &__right{ @include cube-right($width, $height, $depth); }
    &__left{ @include cube-left($width, $height, $depth); }
    &__top{ @include cube-top($width, $height, $depth);}
    &__bottom{ @include cube-bottom($width, $height, $depth); }
}
/************************/
/* Mixin para crear cubo ( Caras siempre al frente ) */
/************************/
@mixin cube-front($width, $height, $depth) {
    width: $width;
    height: $height;
    transform-origin: bottom left;
    transform: rotateX(-90deg) translateZ( -($height - ($depth * 2) ) );
}
@mixin cube-back($width, $height, $depth) {
    width: $width;
    height: $height;
    transform-origin: top left;
    transform: rotateX(-90deg) rotateY(180deg) translateX(-$width) translateY(-$height) ;
}
@mixin cube-right($width, $height, $depth) {
    width: $depth * 2;
    height: $height;
    transform-origin: top left;
    transform: rotateY(90deg) rotateZ(-90deg) translateZ($width) translateX(-$depth * 2) translateY(-$height);
}
@mixin cube-left($width, $height, $depth) {
    width: $depth * 2;
    height: $height;
    transform-origin: top left;
    transform: rotateY(-90deg) rotateZ(90deg) translateY(-$height);
}
@mixin cube-top($width, $height, $depth) {
    width: $width;
    height: $depth * 2;
    transform-origin: top left;
    transform: translateZ($height) ;
}
@mixin cube-bottom($width, $height, $depth) {
    width: $width;
    height: $depth * 2;
    transform-origin: top left;
    transform: rotateY(180deg) translateX(-$width);
}
/***********************/
/***********************/
@mixin face-ani($animation, $time, $side, $width-el, $height-el, $depth-el) {

    animation: #{$animation} #{$time} infinite ease;

    @keyframes #{$animation} {
        0%, 15%, 45%, 60%, 62%, 68%{
            @if $side == "cube-front" { @include cube-front($width-el, $height-el, $depth-el); }
            @else if $side == "cube-back" { @include cube-back($width-el, $height-el, $depth-el); }
            @else if $side == "cube-right" { @include cube-right($width-el, $height-el, $depth-el); }
            @else if $side == "cube-left" { @include cube-left($width-el, $height-el, $depth-el); }
            @else if $side == "cube-top" { @include cube-top($width-el, $height-el, $depth-el); }
        }
        20%, 40%, 58%, 64%, 70%, 100%{
            @if $side == "cube-front" { @include cube-front($width-el, $height-finish, $depth-el); }
            @else if $side == "cube-back" { @include cube-back($width-el, $height-finish, $depth-el); }
            @else if $side == "cube-right" { @include cube-right($width-el, $height-finish, $depth-el); }
            @else if $side == "cube-left" { @include cube-left($width-el, $height-finish, $depth-el); }
            @else if $side == "cube-top" { @include cube-top($width-el, $height-finish, $depth-el); }
        }
    }
}
/**/
*, *::after, *::before {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	user-select: none;
    transform-style: preserve-3d;
    -webkit-tap-highlight-color: transparent;
}
/* Generic */
body{
	display: flex;
	justify-content: center;
	align-items: center;

    width: 100%;
    height: 100vh;
    overflow: hidden;
	background-color: $bg-1;
	cursor: pointer;
}

.face{ position: absolute; }

/***************/
.house{
	position: absolute;
    width: 36vw;
    height: 24vw;

	transform:
		perspective(20000px)
		rotateX(75deg)
		rotateZ(35deg)
		translateZ(-9vw);
	;
	transition: transform .1s linear;
}
.shadows{
	width: 100%;
	height: 100%;
	overflow: hidden;
}
	.shadow-a{
		position: absolute;
		right: 0;
		bottom: 0;
		width: 130%;
		height: 103%;
		transform-origin: top right;
		transform: skewY(-3deg);
		background-color: $bg-2;
		box-shadow: -1vw 1vw 1.5vw $bg-2;
		filter: blur(.5vw);
	}
	.shadow-b{
		position: absolute;
		top: 0;
		width: 100%;
		height: 101.5%;
		background-color: darken($bg-2, 4);
	}
/***************/
/***************/
.al{
	$width-el: 30vw;
	$height-el: .4vw;
	$depth-el: 12vw;

    @include cube($width-el, $height-el, $depth-el);

    width: 3vw;
    height: 24vw;
	position: absolute;
	left: 0;
	top: 0;

    &__front{ background-image: linear-gradient(to right, darken($white-3, 20), $white-3 ); }
    &__back{ background-color: $white-3; }
    &__right{ background-color: $white-1; }
    &__left{ background-color: darken($white-3, 25); }
    &__top{
		background-image: linear-gradient(to right, darken($white-3, 10) 40%, darken($white-2, 5) , $white-2  );
		&::before{
			content: '';
			position: absolute;
			bottom: 0;
			width: 13vw;
			height: 7vw;

			background-image: linear-gradient(-135deg, transparent 20%, rgba( darken($light-2, 5), .75));
		}
		&::after{
			content: '';
			position: absolute;
			bottom: 1vw;
            left: 6vw;
			width: 5vw;
			height: 5vw;
            border-radius: 50%;
            background-image: radial-gradient(rgba($white-1, .25), transparent);
            filter: blur(.7vw);

		}
	}
    &__bottom{  background-color: $white-3; }
}
.ab{
	$width-el: 8vw;
	$height-el: .4vw;
	$depth-el: 4vw;

    @include cube($width-el, $height-el, $depth-el);

    width: 8vw;
    height: 8vw;
	position: absolute;
	right: 0;
	bottom: 0;

    &__front{ background-color: $white-3; }
    &__back{ background-color: $white-3; }
    &__right{ background-color: $white-1; }
    &__left{ background-color: $white-1; }
    &__top{ background-color: $white-2; }
    &__bottom{ background-color: $white-3; }
}
.at{
	$width-el: 8vw;
	$height-el: .4vw;
	$depth-el: 2vw;

    @include cube($width-el, $height-el, $depth-el);

    width: 8vw;
    height: 4vw;
	position: absolute;
	right: 0;
	top: 0;

    &__front{ background-color: $white-3; }
    &__back{ background-color: $white-3; }
    &__right{ background-color: $white-1; }
    &__left{ background-color: $white-1; }
    &__top{ background-color: $white-2; }
    &__bottom{  background-color: $white-3; }
}
.ac{
	$width-el: 6vw;
	$height-el: 1vw;
	$depth-el: 6vw;

    @include cube($width-el, $height-el, $depth-el);

    width: 6vw;
    height: 12vw;
	position: absolute;
	right: 0;
	top: 4vw;

    .face{ opacity: .9; }

    &__front{ background-color: $water-3; opacity: .75; }
    &__back{ background-color: $water-3; }
    &__right{ background-image: linear-gradient(to top, $water-2, $water-1 ); }
    &__left{ background-color: darken($water-4, 10); }
    &__top{
        opacity: .75;
		background-image:
			linear-gradient(
				to right,
				$water-1 0,
				$water-1 5%,
				$water-2 20%,
				$water-2 30%,
				$water-1 40%,
				$water-1 65%,
				darken($water-1, 3) 70%,
				darken($water-1, 3) 72%,
				$water-1 85%
			);

		box-shadow: inset .5vw .5vw 2vw rgba($white-1, .5);

		&::before{
			content: '';
			position: absolute;
			width: 40%;
			height: 100%;
			overflow: hidden;

			background-image:
			linear-gradient(
				to bottom,
				transparent 0,
				transparent 10%,
				rgba($water-2, .9) 15%,
				rgba($water-2, .9) 40%,
				rgba($white-1, .2) 40%,
				rgba($white-1, .2) 50%,
				transparent 60%
			);

			filter: blur(.15vw);
		}
	}
    &__bottom{
		background-color: $water-3;
		&::before{
			content: '';
			position: absolute;
			width: 100%;
			height: 100%;
			box-shadow: -.25vw .25vw 1vw $water-4;
		}
	}
}
/***************/
/***************/
.bce{
	$width-el: 17vw;
	$height-el: .5vw;
	$depth-el: 11vw;

    @include cube($width-el, $height-el, $depth-el);

    width: 17vw;
    height: 20.5vw;
	position: absolute;
	right: 6vw;
	top: 0;
	transform: translateZ(.41vw);

    &__front{ background-image: linear-gradient(to right, darken($white-3, 10), $white-3 ); }
    &__back{ background-color: $white-3; }
    &__right{ background-color: $white-2; }
    &__left{ background-color: $white-3; }
    &__top{ background-image: linear-gradient(135deg, darken($white-3, 10) 60%, $white-2  ); }
    &__bottom{
		background-color: $white-3;

		&::before{
			content: '';
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 101%;
			background-color: $white-4;
			filter: blur(.35vw);
		}
	}
}
.bci{
	$width-el: 16vw;
	$height-el: .5vw;
	$depth-el: 10.5vw;

    @include cube($width-el, $height-el, $depth-el);

    width: 16vw;
    height: 21vw;
	position: absolute;
	right: 6vw;
	top: 0;
	transform: translateZ(.92vw);

	&__front{ background-image: linear-gradient(to right, darken($white-3, 10), $white-3 ); }
    &__back{ background-color: $white-3; }
    &__right{ background-color: $white-2; }
    &__left{ background-color: $white-3; }
    &__top{
		background-image: linear-gradient(135deg, darken($white-3, 10) 60%, $white-2  );

		&::before{
			content: '';
			position: absolute;
			width: 100%;
			height: 16.4vw;
			background-color: lighten($bg-1, 5);
		}
		&::after{
			content: '';
			position: absolute;
			bottom: 1.5vw;
			left: 1vw;
			width: 10vw;
			height: 3.5vw;
			border-radius: 50%;
			background-image: radial-gradient($light-2, transparent);
			filter: blur(.5vw);
		}
	}
    &__bottom{
		background-color: $white-3;
		&::before{
			content: '';
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 101%;
			background-color: $white-4;
			filter: blur(.35vw);
		}
	}
}
.bl{
	$width-el: 13.1vw;
	$height-el: .5vw;
	$depth-el: 8.5vw;

    @include cube($width-el, $height-el, $depth-el);

    width: 13vw;
    height: 17vw;
	position: absolute;
	left: 0;
	top: 0;
	transform: translateZ(.41vw);

    &__front{ background-image: linear-gradient(to right, darken($white-3, 30), darken($white-3, 10) ); }
    &__back{ background-color: $white-3; }
    &__right{ background-color: $white-2; }
    &__left{ background-color: $white-1; }
    &__top{
		background-color: lighten($bg-1, 5);
		&::before{
			content: '';
			position: absolute;
			top: 2vw;
			left: 3.5vw;
			width: 12vw;
			height: 12vw;
			border-radius: 50%;
			background-color: rgba($light-1, .35);
			filter: blur(.95vw);
		}
	}
    &__bottom{
		background-color: $white-3;
		&::before{
			content: '';
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 102%;
			background-color: darken($white-3, 20);
			box-shadow: 0vw .25vw 1vw darken($white-3, 20);
		}
	}
}
.bt{
	$width-el: 4vw;
	$height-el: 1.1vw;
	$depth-el: 2vw;

    @include cube($width-el, $height-el, $depth-el);

    width: 4vw;
    height: 4vw;
	position: absolute;
	right: 2vw;
	top: 0;
	transform: translateZ(.41vw);

    &__front{ background-image: linear-gradient(to top, darken($white-3, 15) 50%, lighten($white-3, 2) ); }
    &__back{ background-color: $white-3; }
    &__right{ background-color: $white-2; }
    &__left{ background-color: $white-1; }
    &__top{ background-color: darken($white-2, 5); }
    &__bottom{ background-color: $white-3; }
}
.bbe{
	$width-el: 6vw;
	$height-el: .5vw;
	$depth-el: 3vw;

    @include cube($width-el, $height-el, $depth-el);

    width: 6vw;
    height: 6vw;
	position: absolute;
	right: 0;
	bottom: 2vw;
	transform: translateZ(.41vw);

	&__front{ background-color: $white-3; }
    &__back{ background-color: $white-3; }
    &__right{ background-color: $white-2; }
    &__left{ background-color: $white-1; }
    &__top{ background-color: darken($white-1, 2); }
    &__bottom{
		background-color: $white-1;
		&::before{
			content: '';
			position: absolute;
			top: 0;
			right: 0;
			width: 95%;
			height: 104%;
			background-color: $white-4;
			filter: blur(.35vw);
		}
	}
}
.bbi{
	$width-el: 4vw;
	$height-el: .5vw;
	$depth-el: 2.5vw;

    @include cube($width-el, $height-el, $depth-el);

    width: 4vw;
    height: 5vw;
	position: absolute;
	right: 2vw;
	bottom: 3vw;
	transform: translateZ(.92vw);

	&__front{ background-color: $white-3; }
    &__back{ background-color: $white-3; }
    &__right{ background-color: $white-2; }
    &__left{ background-color: $white-1; }
    &__top{ background-color: darken($white-2, 2); }
    &__bottom{
		background-color: $white-1;
		&::before{
			content: '';
			position: absolute;
			top: 0;
			right: 0;
			width: 95%;
			height: 104%;
			background-color: $white-4;
			filter: blur(.5vw);
		}
	}
}
/***************/
/***************/
.cl{
	$width-el: 3.5vw;
	$height-el: 12vw;
	$depth-el: 9.5vw;

    @include cube($width-el, $height-el, $depth-el);

    width: 5vw;
    height: 3vw;
	position: absolute;
	left: 0;
	top: 0;
	transform: translateZ(.41vw);

	&__front{
		display: flex;
		justify-content: center;
		background-image: linear-gradient(to bottom, $white-3, darken($white-3, 15));
		overflow: hidden;

		&::after{
			content: '';
			position: absolute;
			left: 0;
			bottom: -1.1vw;
			width: 200%;
			height: 3vw;
			background-image: linear-gradient(to right, rgba($light-1, .3), rgba($white-3, .25));
			filter: blur(.175vw);
			transform: rotateZ(-30deg);
		}
	}
    &__back{ background-color: $white-3; }
    &__right{
		background-image: linear-gradient(to top, darken($white-3, 10), darken($white-3, 20), lighten($light-2, 5)  70%);
		&::before{
			content: '';
			position: absolute;
			right: 0;
			width: calc(100% - 2.5vw);
			height: 100%;
			background-image: linear-gradient(to bottom, $white-1, lighten($light-2, 5) 15%, darken($white-2, 10) 80%, darken($white-3, 10) );
			filter: blur(.5vw);
		}
		.lamp:nth-of-type(1){ left: 25%;}
		.lamp:nth-of-type(2){ left: 50%;}
		.lamp:nth-of-type(3){ left: 75%;}
	}
    &__left{ background-image: linear-gradient(to top, darken($white-3, 20),darken($white-3, 30)); }
    &__top{ background-color: darken($white-3, 5); }
    &__bottom{
		background-color: $white-3;
		&::before{
			content: '';
			position: absolute;
			top: 0;
			right: 0;
			width: 115%;
			height: 103%;
			background-color: rgba($white-4, .75);
			filter: blur(.5vw);
		}
	}
}

.cc{
	$width-el: 1vw;
	$height-el: 12.5vw;
	$depth-el: 9.5vw;

    @include cube($width-el, $height-el, $depth-el);

    width: 1vw;
    height: 19vw;
	position: absolute;
	left: 15vw;
	top: 0;
	transform: translateZ(12.5vw);

	&__front{ background-image: linear-gradient(to bottom, darken($white-3, 5) , $white-3 10% ); }
	&__back{ background-color: $white-3; }
	&__right{ background-color: $white-1; }
	&__left{ background-image: linear-gradient(to top, darken($white-3, 20),darken($white-3, 30)); }
	&__top{ background-color: $white-2; }
	&__bottom{  background-color: $white-3; }
}
.ccl{
	$width-el: 1vw;
	$height-el: 11.5vw;
	$depth-el: 1.5vw;

    @include cube($width-el, $height-el, $depth-el);

    width: 1vw;
    height: 3vw;
	position: absolute;
	left: 15vw;
	top: 16vw;
	transform: translateZ(1.43vw);

	&__front{ background-image: linear-gradient(to top, darken($white-3, 10), $white-3 ); }
	&__back{ background-color: $white-3; }
	&__right{
		background-image: linear-gradient(to bottom, darken($white-3, 30), darken($white-3, 20) 70%, $light-2);

		&::before{
			content: '';
			position: absolute;
			top: -.5vw;
			left: 0;
			width: 100%;
			height: 2vw;
			transform-origin: bottom left;
			transform: translateZ(.05vw);
			background-image: linear-gradient(-45deg,darken($white-3, 20) ,darken($white-3, 30) 80%, transparent 80%);

		}
	}
	&__left{ background-image: linear-gradient(to top, darken($white-3, 20),darken($white-3, 30)); }
	&__top{ background-color: $white-2; }
	&__bottom{
		background-color: $white-3;
		&::before{
			content: '';
			position: absolute;
			top: 0;
			right: 0;
			width: 102%;
			height: 101%;
			background-color: $white-4;
			filter: blur(.35vw);
		}
	}
}
.cml{
	$width-el: 16vw;
	$height-el: 1vw;
	$depth-el: 9.5vw;

    @include cube($width-el, $height-el, $depth-el);

    width: 16vw;
    height: 19vw;
	position: absolute;
	left: 0;
	top: 0;
	transform: translateZ(12.41vw);

	&__front{ background-image: linear-gradient(to bottom, darken($white-3, 3), $white-3 ); }
	&__back{ background-color: $white-3; }
	&__right{ background-color: $white-1; }
	&__left{ background-color: darken($white-3, 30);}
	&__top{
		background-image: linear-gradient(to right, darken($white-3, 20), darken($white-3, 10) 30%, darken($light-2, 10) );
		box-shadow:
			inset .3vw .3vw 2vw rgba($white-4, .1),
			inset -.3vw .3vw 2vw rgba($white-4, .1),
			inset .3vw -.3vw 2vw rgba($white-4, .1),
			inset -.3vw -.3vw 2vw rgba($white-4, .1)
		;
	}
	&__bottom{  background-color: $white-3; }
}
.cmr{
	$width-el: 16vw;
	$height-el: 1vw;
	$depth-el: 9vw;

    @include cube($width-el, $height-el, $depth-el);

    width: 16vw;
    height: 18vw;
	position: absolute;
	left: 16vw;
	top: 0;
	transform: translateZ(12.41vw);

	&__front{ background-image: linear-gradient(to bottom, darken($white-3, 5), $white-3 ); }
	&__back{ background-color: $white-3; }
	&__right{ background-color: $white-1; }
	&__left{ background-color: $white-3; }
	&__top{
		background-image: linear-gradient(to right, $white-2, darken($white-2, 2));

		&::before{
			content: '';
			position: absolute;
			width: 100%;
			height: 100%;
			background-image: linear-gradient(48.5deg, lighten($white-2, 2) 50%, transparent 50%);
			opacity: .35;
		}
	}
	&__bottom{  background-color: $white-3; }
}
.cmt{
	$width-el: 12vw;
	$height-el: 1vw;
	$depth-el: 9.5vw;

    @include cube($width-el, $height-el, $depth-el);

    width: 12vw;
    height: 19vw;
	position: absolute;
	left: 3vw;
	top: 0;
	transform: translateZ(24vw);

	&__front{ background-image: linear-gradient(to bottom, darken($white-3, 5), $white-3 ); }
	&__back{ background-color: $white-3; }
	&__right{ background-color: $white-1; }
	&__left{ background-color: darken($white-3, 10); }
	&__top{ background-color: $white-2; }
	&__bottom{  background-color: $white-3; }
}

/***************/
/***************/
.dl{
	$width-el: 2vw;
	$height-el: 11vw;
	$depth-el: .5vw;

    @include cube($width-el, $height-el, $depth-el);

    width: 2vw;
    height: 1vw;
	position: absolute;
	left: 21.9vw;
	bottom: 7vw;
	transform: translateZ(1.5vw);

	&__front{ background-image: linear-gradient(to bottom, darken($white-3, 20), darken($white-3, 15) 35%, darken($white-3, 10) 72%, $light-2 ); }
	&__back{ background-color: $white-3; }
	&__right{ background-color: $white-3; }
	&__left{ background-color:  darken($white-3, 15); }
	&__top{ background-color: $white-2; }
	&__bottom{
		background-color: $white-3;
		&::before{
			content: '';
			position: absolute;
			top: 0;
			right: 0;
			width: 102%;
			height: 101%;
			background-color: $white-4;
			filter: blur(.35vw);
		}
	}
}
.dm{
	$width-el: 6vw;
	$height-el: 4vw;
	$depth-el: .5vw;

    @include cube($width-el, $height-el, $depth-el);

    width: 6vw;
    height: 1vw;
	position: absolute;
	left: 16vw;
	bottom: 7vw;
	transform: translateZ(8.5vw);

	&__front{ background-image: linear-gradient(to bottom, darken($white-3, 20), darken($white-3, 15) ); }
	&__back{ background-color: $white-3; }
	&__right{ background-color: $white-1; }
	&__left{ background-color: $white-3; }
	&__top{ background-color: $white-2; }
	&__bottom{  background-color: $white-3; }
}
.dt{
	$width-el: 8vw;
	$height-el: 11vw;
	$depth-el: .5vw;

    @include cube($width-el, $height-el, $depth-el);

    width: 8vw;
    height: 1vw;
	position: absolute;
	left: 14vw;
	top: 0;
	transform: translateZ(1.5vw);

	&__front{ background-color: $white-2; }
	&__back{ background-color: $white-3; }
	&__right{ background-color: $white-1; }
	&__left{ background-color: $white-2; }
	&__top{ background-color: $white-2; }
	&__bottom{  background-color: $white-3; }
}
/***************/
/***************/
.el{
	$width-el: 11.4vw;
	$height-el: 11.5vw;
	$depth-el: .25vw;

    @include cube($width-el, $height-el, $depth-el);

    width: 11.4vw;
    height: 1vw;
	position: absolute;
	left: 3.5vw;
	bottom: 7vw;
	transform: translateZ(1vw);

	&__front{
		border: .1vw solid rgba($water-3, .5);
		overflow: hidden;
		background-image: repeating-linear-gradient(-45deg, rgba($water-2, .1) 1vw, rgba($water-1, .1) 1.5vw);
	}

}
.ec{
	$width-el: 14vw;
	$height-el: 11vw;
	$depth-el: .25vw;

    @include cube($width-el, $height-el, $depth-el);

    width: 14vw;
    height: 1vw;
	position: absolute;
	left: 16vw;
	bottom: 7vw;
	transform: translateZ(1.5vw);

	&__front{
		border: .1vw solid rgba($water-3, .5);
		overflow: hidden;
		background-image: linear-gradient(to right, rgba($water-2, .1), rgba($water-1, .1));
	}
}
.er{
	$width-el: .1vw;
	$height-el: 11vw;
	$depth-el: 8.3vw;

    @include cube($width-el, $height-el, $depth-el);

    width: 14vw;
    height: 1vw;
	position: absolute;
	left: 29.8vw;
	top: 0;
	transform: translateZ(1.5vw);

	&__right{
		border: .1vw solid rgba($water-3, .5);
		overflow: hidden;
		background-image: linear-gradient(to right, rgba($water-2, .1), rgba($water-1, .1));
	}
}
.eb{
	$width-el: 26.4vw;
	$height-el: 11.4vw;
	$depth-el: .25vw;

    @include cube($width-el, $height-el, $depth-el);

    width: 26.4vw;
    height: 1vw;
	position: absolute;
	left: 3.5vw;
	top: 0;
	transform: translateZ(1vw);

	&__back{
		border: .1vw solid rgba($water-3, .5);
		overflow: hidden;
		background-image: linear-gradient(to right, rgba($water-2, .1), rgba($water-1, .1));
	}
}
/***************/
/***************/
.fl{
	$width-el: .25vw;
	$height-el: .25vw;
	$depth-el: 8.45vw;

    @include cube($width-el, $height-el, $depth-el);

    width: 1vw;
    height: 8.45vw;
	position: absolute;
	left: 1.5vw;
	top: 1vw;
    transform: translateZ(16.75vw);

	&__front{ background-color: darken($white-3, 10); }
	&__back{ background-color: $white-3; }
	&__right{ background-image: linear-gradient(to bottom, darken($white-3, 10), darken($white-3, 16) 50%); }
	&__left{
        background-color:  darken($white-3, 20);
        &::before{
            content: '';
            position: absolute;
            top: .25vw;
            right: 0;
            width: 100%;
            height: 3.25vw;
            border: .1vw solid rgba($water-3, .5);
        }
    }
	&__top{ background-image: linear-gradient(to bottom, darken($white-3, 10), darken($white-2, 5)); }
	&__bottom{  background-color: $white-3; }


}
.fb,
.ft{
	$width-el: 14vw;
	$height-el: .25vw;
	$depth-el: .125vw;

    @include cube($width-el, $height-el, $depth-el);

    width: 5vw;
    height: .25vw;
	position: absolute;
	left: 1.5vw;
	bottom: 6.1vw;
	transform: translateZ(16.75vw);
	&__front{
		background-color: darken($white-3, 10);

		&::before{
			content: '';
			position: absolute;
			top: .25vw;
			left: .1vw;
			width: calc(100% - .25vw);
			height: 3.25vw;
			border: .1vw solid rgba($water-3, .5);
			background-image: linear-gradient(to right, rgba($water-2, .15), rgba($water-1, .15));
		}
	}
	&__back{ background-color: $white-3; }
	&__right{ background-color: $white-1; }
	&__left{ background-color: $white-3; }
	&__top{ background-image: linear-gradient(to bottom, darken($light-2, 10), darken($white-2, 5)); }
	&__bottom{  background-color: $white-3; }
}
.ft{ top: 1vw; }
/***************/
/***************/
.table{
	$width-el: 3vw;
	$height-el: .25vw;
	$depth-el: 2.5vw;

    @include cube($width-el, $height-el, $depth-el);

    width: 3vw;
    height: 5vw;
	right: 10.5vw;
	bottom: 13vw;
	position: absolute;
	transform: translateZ(2.25vw);

	&__front{ background-color: lighten($white-3, 3); }
	&__back{ background-color: $white-3; }
	&__right{ background-color: $white-1; }
	&__left{ background-color: $white-3; }
	&__top{ background-color: darken($white-2, 3); }
	&__bottom{  background-color: $white-3; }


	&::before{
		content: '';
		position: absolute;
		left: -10%;
		top: -10%;
		width: 120%;
		height: 120%;
		background-color: darken($white-3, 5);
		filter: blur(.5vw);
		transform: translateZ(-.81vw);
	}
}
.foot{
	$width-el: .25vw;
	$height-el: 1vw;
	$depth-el: .125vw;

    @include cube($width-el, $height-el, $depth-el);
    width: .25vw;
    height: .25vw;

	position: absolute;
	&__front{ background-color: lighten($white-3, 3); }
	&__back{ background-color: $white-2; }
	&__right{ background-color: $white-3; }
	&__left{ background-color: $white-2; }
	&__top{ background-color: $white-3; }
	&__bottom{ background-color: $white-3;}

	&:nth-of-type(1){ bottom: 0; right: 0; }
	&:nth-of-type(2){ bottom: 0; left: 0; }
	&:nth-of-type(3){ top: 0; right: 0; }
	&:nth-of-type(4){ top: 0; left: 0; }

}

/***************/
/***************/
.lamp{
	position: absolute;
	top: 2.5vw;
	width: .75vw;
	height: 2.5vw;
	border-radius: 5vw;
	opacity: .95;
	background-color: $light-1;
	box-shadow:
		.15vw .15vw .75vw rgba($light-2, .5),
		.15vw -.15vw .75vw rgba($light-2, .5),
		-.15vw .15vw .75vw rgba($light-2, .5),
		-.15vw -.15vw .75vw rgba($light-2, .5)
	;
	filter: blur(.15vw);
}
/***************/
/***************/
.kitchen{
	$width-el: 2vw;
	$height-el: .25vw;
	$depth-el: 6vw;

    @include cube($width-el, $height-el, $depth-el);
    width: 2vw;
    height: 12vw;
	top: 3vw;
	left: 3.5vw;
	transform: translateZ(3vw);
	position: absolute;

	&__front{ background-color: darken($white-3, 10); }
	&__back{ background-color: $white-3; }
	&__right{ background-color: $white-1; }
	&__left{
		background-color: $white-3;

		&::before{
			content: '';
			position: absolute;
			width: 100%;
			top: .25vw;
			height: 1.25vw;
			background-color: rgba(lighten($white-4, 20), .75);
			filter: blur(.5vw);
		}
	}
	&__top{ background-image: linear-gradient(to right, lighten($light-1, 3), lighten($light-1, 5) 60% ); }
	&__bottom{  background-color: $white-3; }
}
/***************/
/***************/
.couch{
	$width-el: 5vw;
	$height-el: 2vw;
	$depth-el: 1.5vw;

    @include cube($width-el, $height-el, $depth-el);
    width: 5vw;
    height: 3vw;
	top: .5vw;
	left: 16vw;
	transform: translateZ(1.5vw);
	position: absolute;

	&__front{ background-color: lighten($white-3, 6); }
	&__back{ background-color: $white-3; }
	&__right{ background-color: $white-1; }
	&__left{ background-color: $white-3; }
	&__top{ background-color: darken($white-2, 3); }
	&__bottom{
		background-color: $white-3;

		&::before{
			content: '';
			position: absolute;
			left: -10%;
			top: -10%;
			width: 120%;
			height: 120%;
			background-color: rgba(darken($white-3, 10), .5 );
			filter: blur(.25vw);
		}
	}
}
.couchb{
	$width-el: 7vw;
	$height-el: .75vw;
	$depth-el: 2.5vw;

    @include cube($width-el, $height-el, $depth-el);
    width: 7vw;
    height: 1vw;
	bottom: 17vw;
	left: 6vw;
	transform: translateZ(1vw);
	position: absolute;

	&__front{ background-color: lighten($white-3, 6); }
	&__back{ background-color: $white-3; }
	&__right{ background-color: $white-1; }
	&__left{ background-color: $white-3; }
    &__top{ background-image: linear-gradient(to right, lighten($light-1, 3), lighten($light-1, 5) 60% ); }
	&__bottom{
		background-color: $white-3;

		&::before{
			content: '';
			position: absolute;
			left: -10%;
			top: -10%;
			width: 120%;
			height: 120%;
			background-color: rgba(darken($white-3, 10), .5 );
			filter: blur(.25vw);
		}
	}
}
.couchc,
.couchd{
	$width-el: 5vw;
	$height-el: 1.5vw;
	$depth-el: .75vw;

    @include cube($width-el, $height-el, $depth-el);
    width: 5vw;
    height: 1.5vw;
	bottom: 6.5vw;
	left: 9vw;
	transform: translateZ(13.5vw);
	position: absolute;

	&__front{ background-color: darken($white-3, 0); }
	&__back{ background-color: $white-3; }
	&__right{ background-image: linear-gradient(to bottom, darken($light-1, 5), $light-1, $white-2 ); }
	&__left{ background-color: darken($white-3, 15); }
    &__top{ background-image: linear-gradient(to left, darken($light-1, 5), $light-1, $white-2 ); }
	&__bottom{
		background-color: $white-3;

		&::before{
			content: '';
			position: absolute;
			left: -10%;
			top: -10%;
			width: 120%;
			height: 120%;
			background-color: rgba(darken($white-3, 30), .5 );
			filter: blur(.25vw);
		}
	}
}

.couchd{ top: 1.5vw; }
/***************/
/***************/
.picture{
	$width-el: .35vw;
	$height-el: 4vw;
	$depth-el: 1.5vw;

    @include cube($width-el, $height-el, $depth-el);

    width: .5vw;
    height: 3vw;
	bottom: 14vw;
	left: 3.35vw;
	transform: translateZ(6vw);
	position: absolute;

	&__front{ background-color: darken($white-3, 0);  }
	&__back{ background-color: $white-3; }
	&__right{
		display: flex;
		justify-content: center;
		align-items: center;
		background-image: linear-gradient(to bottom, $light-1, $white-1);
		&::before,
		&::after{
			content: '';
			position: absolute;
			width: 1.1vw;
			height: 1.1vw;
			border: .125vw solid rgba($white-3, .5);
		}
		&::before{
			top: 40%;
			left: 25%;
		}
		&::after{
			top: 55%;
			left: 45%;
		}
	}
	&__left{ background-color: $white-3; }
	&__top{ background-color: darken($white-2, 3); }
	&__bottom{ background-color: $white-3; }
}
/***************/
/***************/
.door-l{
	$width-el: .125vw;
	$height-el: 7vw;
	$depth-el: .25vw;

    @include cube($width-el, $height-el, $depth-el);

    width: .125vw;
    height: 1vw;
	left: 17vw;
	bottom: 6.75vw;
	transform: translateZ(1.5vw);

	position: absolute;

	&__front{ background-color: darken($white-3, 50); }
	&__back{ background-color: darken($white-3, 28); }
	&__right{ background-color: darken($white-3, 28); }
	&__left{ background-color: darken($white-3, 50); }
	&__top{ background-color: darken($white-3, 28); }
	&__bottom{  background-color: darken($white-3, 28); }
}
.door-r{
	$width-el: 2vw;
	$height-el: 7vw;
	$depth-el: .25vw;

    @include cube($width-el, $height-el, $depth-el);

    width: 2vw;
    height: 1vw;
	left: 20vw;
	bottom: 6.75vw;
	transform: translateZ(1.5vw);

	position: absolute;

	&__front{ background-color: darken($white-3, 50); }
	&__back{ background-color: darken($white-3, 28); }
	&__right{ background-color: darken($white-3, 28); }
	&__left{ background-color: darken($white-3, 50); }
	&__top{ background-color: darken($white-3, 28); }
	&__bottom{  background-color: darken($white-3, 28); }
}
.door-b,
.door-t{
	$width-el: 6vw;
	$height-el: .125vw;
	$depth-el: .25vw;

    @include cube($width-el, $height-el, $depth-el);

    width: 2vw;
    height: 1vw;
	left: 16vw;
	bottom: 6.75vw;
	transform: translateZ(1.5vw);

	position: absolute;

	&__front{ background-color: darken($white-3, 50); }
	&__back{ background-color: darken($white-3, 28); }
	&__right{ background-color: darken($white-3, 28); }
	&__left{ background-color: darken($white-3, 28); }
	&__top{ background-color: darken($white-3, 28); }
	&__bottom{  background-color: darken($white-3, 28); }
}

.door-t{ transform: translateZ(8.4vw); }

              
            
!

JS

              
                /*
		Designed by: Joanna Ngai
		Original image: https://dribbble.com/shots/14118297-Villa
*/


const h = document.querySelector("#h");
const b = document.body;

let base = (e) => {
    var x = e.pageX / window.innerWidth - 0.5;
    var y = e.pageY / window.innerHeight - 0.5;
    h.style.transform = `
        perspective(20000px)
        rotateX(${ y * 10  + 75}deg)
        rotateZ(${ -x * 10  + 35}deg)
        translateZ(-9vw)
    `;
}

b.addEventListener("pointermove", base);

              
            
!
999px

Console