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
$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); }
/*
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);
External CSS
This Pen doesn't use any external CSS resources.
External JavaScript
This Pen doesn't use any external JavaScript resources.