div.main#m
div.b#b
//---------------------
div.bt
div.bt__front.face
//---------------------
div.bt__street
div.bt__street-a
div.bt__street-b
div.bt__street-l
div.bt__street-c
div.bt__street-a
div.lampposts
div.lamppost
div.lamp
div.lamp__front.face
div.lamp__back.face
div.lamp__right.face
div.lamp__left.face
div.lamp__top.face
div.lamp__bottom.face
div.light
div.light__front.face
div.light__back.face
div.light__right.face
div.light__left.face
div.light__top.face
div.light__bottom.face
div.lamppost
div.lamp
div.lamp__front.face
div.lamp__back.face
div.lamp__right.face
div.lamp__left.face
div.lamp__top.face
div.lamp__bottom.face
div.light
div.light__front.face
div.light__back.face
div.light__right.face
div.light__left.face
div.light__top.face
div.light__bottom.face
div.lamppost
div.lamp
div.lamp__front.face
div.lamp__back.face
div.lamp__right.face
div.lamp__left.face
div.lamp__top.face
div.lamp__bottom.face
div.light
div.light__front.face
div.light__back.face
div.light__right.face
div.light__left.face
div.light__top.face
div.light__bottom.face
div.lamppost
div.lamp
div.lamp__front.face
div.lamp__back.face
div.lamp__right.face
div.lamp__left.face
div.lamp__top.face
div.lamp__bottom.face
div.light
div.light__front.face
div.light__back.face
div.light__right.face
div.light__left.face
div.light__top.face
div.light__bottom.face
//---------------------
div.bt__sidewalk
//---------------------
div.e1
div.e1__front.face
div.e1__back.face
div.e1__right.face
div.e1__left.face
- var n = 1;
while n < 16
div(class='e1__window')
- n++
div.e1__top.face
div.e1__bottom.face
- var n = 1;
while n < 16
div(class='e1__window')
- n++
div.e1__door
//---------------------
div.e2-c
div.e2
div.e2__front.face
div.e2__back.face
div.e2__right.face
div.e2__left.face
div.e2__top.face
div.e2__bottom.face
div.e1__window
div.e1__window
div.e1__door
div.e1__window
div.e1__window
div.e2
div.e2__front.face
div.e2__back.face
div.e2__right.face
div.e2__left.face
div.e2__top.face
div.e2__bottom.face
- var n = 1;
while n < 6
div(class='e1__window')
- n++
//---------------------
div.e1.e1--b
div.e1__front.face
div.e1__back.face
div.e1__right.face
div.e1__left.face
- var n = 1;
while n < 16
div(class='e1__window')
- n++
div.e1__top.face
div.e1__bottom.face
- var n = 1;
while n < 16
div(class='e1__window')
- n++
div.e1__door
div.bt__back.face
div.bt__right.face
div.bt__left.face
div.bt__top.face
div.bt__bottom.face
//---------------------
div.bl
div.bl__front.face
div.t
div.t1
div.t1__front.face
div.t1__back.face
div.t1__right.face
div.t1__left.face
div.t1__top.face
div.t1__bottom.face
div.t1
div.t1__front.face
div.t1__back.face
div.t1__right.face
div.t1__left.face
div.t1__top.face
div.t1__bottom.face
div.t1
div.t1__front.face
div.t1__back.face
div.t1__right.face
div.t1__left.face
div.t1__top.face
div.t1__bottom.face
div.t1
div.t1__front.face
div.t1__back.face
div.t1__right.face
div.t1__left.face
div.t1__top.face
div.t1__bottom.face
div.t1
div.t1__front.face
div.t1__back.face
div.t1__right.face
div.t1__left.face
div.t1__top.face
div.t1__bottom.face
div.bl__back.face
div.bl__right.face
div.bl__left.face
div.bl__top.face
div.bl__bottom.face
//---------------------
div.br
div.br__front.br-f
div.br__back.br-f
div.br__right.br-f
div.br__left.br-f
div.br__top.br-f
div.br__bottom.br-f
/* Variables */
$bg-1: #F3E5DF;
$bg-2: #CABFC1;
$grass-1: #D7E1A7;
$grass-2: #85A879;
$ground-1: #A56C44;
$ground-2: #3B2317;
$water-0: #64A5AF;
$water-1: #529198;
$water-2: #017D92;
$water-3: #08656E;
$street-0: #FCEAE3;
$street-1: #CABFC1;
$street-2: #4C4547;
$e1-1: #E0835C;
$e1-2: #b15640;
$e1-3: #ac523c;
$e1-4: #802a1b;
$window-1: #DBDADB;
$tree-1: #FFF5AA;
$tree-2: #E4DD8F;
$tree-3: #C9CA7E;
$light-1: #f9e2b5;
$light-2: #FFDFA0;
$light-3: #C79162;
/* Reset */
*, *::after, *::before {
margin: 0;
padding: 0;
box-sizing: border-box;
transform-style: preserve-3d;
}
/* Generic */
body{
width: 100%;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background-color: $bg-1;
}
.main{
display: flex;
justify-content: center;
align-items: center;
width: 800px;
height: 600px;
position: relative;
cursor: pointer;
@media(max-width: 800px){ transform: scale(.8); }
@media(max-width: 700px){ transform: scale(.6); }
@media(max-width: 500px){ transform: scale(.5); }
@media(max-width: 400px){ transform: scale(.3); }
}
.face{ position: absolute; }
/**/
.b{
display: flex;
flex-direction: row;
flex-wrap: wrap;
position: relative;
height: 450px;
width: 450px;
transform:
perspective(10000px)
rotateX(60deg)
rotateZ(-45deg)
;
transition: all .2s ease;
&::before{
content: '';
position: absolute;
left: -40px;
top: -10px;
width: 500px;
height: 460px;
background-color: $bg-2;
transform: translateZ(-20px);
}
&::after{
content: '';
position: absolute;
left: -50px;
top: -70px;
width: 200px;
height: 200px;
background-color: $bg-2;
transform: translateZ(-20px) skewY(20deg);
}
}
.bt{
display: flex;
justify-content: center;
align-items: center;
position: relative;
width: 450px;
height: 250px;
&__front{
display: flex;
flex-direction: column-reverse;
width: 450px;
height: 250px;
background-color: $grass-1;
transform: rotateY(0deg) translateZ(15px);
}
&__sidewalk,
&__street{
width: 450px;
height: 125px;
}
&__sidewalk{
display: flex;
justify-content: center;
align-items: center;
background-color: $street-1;
padding-top: 10px;
border-top: 20px solid $grass-1;
border-left: 20px solid $grass-1;
box-shadow: inset 2px 0 0 $street-2;
}
&__street{
&-a{
width: 450px;
height: 25px;
background-image:
repeating-linear-gradient(
to right,
$street-1 0px,
$street-1 45px,
darken($street-1, 15) 45px,
darken($street-1, 15) 46px
);
}
&-b{
display: flex;
justify-content: center;
align-items: center;
width: 450px;
height: 75px;
background-image: linear-gradient(to right, $street-2, darken($street-2, 3) );
border-bottom: 2px solid darken($street-2, 10);
}
&-l{
width: 450px;
height: 6px;
background-image:
repeating-linear-gradient(
to right,
$street-2 0px,
$street-2 10px,
$street-0 10px,
$street-0 30px,
$street-2 30px,
$street-2 40px
);
}
&-c{
width: 50px;
height: 75px;
position: absolute;
margin-left: -45px;
background-image:
repeating-linear-gradient(
to bottom,
transparent 0px,
transparent 5px,
$street-0 5px,
$street-0 14px
);
}
}
&__back{
transform: rotateY(180deg) translateZ(15px);
width: 450px;
height: 250px;
background-color: $grass-1;
}
&__right{
width: 30px;
height: 250px;
transform: rotateY(90deg) translateZ(225px);
background-color: $grass-1;
}
&__left{
width: 30px;
height: 250px;
transform: rotateY(-90deg) translateZ(225px);
background-color: $grass-2;
border-left: 3px solid $ground-2;
}
&__top{
width: 450px;
height: 30px;
transform: rotateX( 90deg) translateZ(125px);
background-color: $grass-2;
}
&__bottom{
width: 450px;
height: 30px;
transform: rotateX(-90deg) translateZ(125px);
background-color: $grass-1;
}
}
.bl{
display: flex;
justify-content: center;
align-items: center;
position: relative;
width: 250px;
height: 200px;
&__front{
width: 250px;
height: 200px;
background-image: linear-gradient(to bottom, $grass-1, darken($grass-1, 5) );
transform: rotateY(0deg) translateZ(15px);
position: absolute;
&::before{
content: '';
position: absolute;
height: 20px;
width: 200px;
bottom: 185px;
left: 250px;
transform-origin: top left;
transform: rotateZ(90deg) skewX(-30deg);
background-image:
repeating-linear-gradient(
to right,
rgba($grass-2, .3) 0px,
rgba($grass-2, .3) 8px,
transparent 8px,
transparent 12px
);
}
}
&__back{
transform: rotateY(180deg) translateZ(15px);
width: 250px;
height: 200px;
background-color: $grass-1;
}
&__right{
width: 30px;
height: 200px;
transform: rotateY(90deg) translateZ(125px);
background-color: $grass-1;
}
&__left{
width: 30px;
height: 200px;
transform: rotateY(-90deg) translateZ(125px);
background-color: $grass-2;
border-left: 3px solid $ground-2;
}
&__top{
width: 250px;
height: 30px;
transform: rotateX( 90deg) translateZ(100px);
background-color: $grass-2;
}
&__bottom{
width: 250px;
height: 30px;
transform: rotateX(-90deg) translateZ(100px);
background-color: $grass-1;
border-bottom: 3px solid $ground-1;
}
}
.t{
&1{
display: flex;
justify-content: center;
align-items: center;
position: absolute;
width: 50px;
height: 50px;
transform: translateZ(6px) ;
&:nth-of-type(1){
top: 100px;
left: 20px;
}
&:nth-of-type(2){
top: 110px;
left: 0px;
}
&:nth-of-type(3){
top: 130px;
left: 10px;
}
&:nth-of-type(4){
top: 130px;
left: 30px;
}
&:nth-of-type(5){
top: 150px;
left: 30px;
}
&__front{
width: 10px;
height: 10px;
background-color: $tree-1;
transform: rotateY(0deg) translateZ(5px);
}
&__back{
position: relative;
width: 10px;
height: 10px;
transform: rotateY(180deg) translateZ(5px);
background-color: $tree-3;
box-shadow:
5px -2px 0 lighten($grass-2, 5),
5px 0px 0 lighten($grass-2, 5),
0px 2px 0 lighten($grass-2, 5),
5px 2px 0 lighten($grass-2, 5)
;
}
&__right{
width: 10px;
height: 10px;
transform: rotateY(90deg) translateZ(5px);
background-color: $tree-1;
}
&__left{
width: 10px;
height: 10px;
transform: rotateY(-90deg) translateZ(5px);
background-color: $tree-3;
}
&__top{
width: 10px;
height: 10px;
transform: rotateX( 90deg) translateZ(5px);
background-color: $tree-1;
}
&__bottom{
width: 10px;
height: 10px;
transform: rotateX(-90deg) translateZ(5px);
background-color: $tree-2;
}
}
}
.br{
display: flex;
justify-content: center;
align-items: center;
position: relative;
width: 200px;
height: 200px;
&-f{
opacity: .7;
position: absolute;
}
&__front{
width: 200px;
height: 200px;
background-color: $water-1;
transform: rotateY(0deg) translateZ(15px);
position: absolute;
overflow: hidden;
&::before{
content: '';
position: absolute;
height: 20px;
width: 200px;
bottom: 180px;
transform: skewX(-5deg);
background-image:
repeating-linear-gradient(
to right,
rgba(white, .1) 0px,
rgba(white, .1) 8px,
transparent 8px,
transparent 12px
);
filter: blur(2px);
}
&::after{
content: '';
position: absolute;
height: 400px;
width: 200px;
bottom: 0;
right: -100px;
background-image: linear-gradient(to right, rgba(white, .1), rgba($water-0, .5));
border-top-left-radius: 30%;
border-bottom-left-radius: 50%;
}
}
&__back{
transform: rotateY(180deg) translateZ(15px);
width: 200px;
height: 200px;
background-image: linear-gradient(to bottom, darken($water-3, 20), $water-3);
opacity: 1;
}
&__right{
width: 30px;
height: 200px;
transform: rotateY(90deg) translateZ(100px);
background-image: linear-gradient(to right, $water-0, $water-1);
opacity: .3;
}
&__left{
width: 30px;
height: 200px;
transform: rotateY(-90deg) translateZ(100px);
background-color: $water-1;
opacity: 1;
&::before{
content: '';
position: absolute;
height: 200px;
width: 15px;
left: 30px;
background-image:
repeating-linear-gradient(
to bottom,
darken(white, 15) 0px,
darken(white, 15) 8px,
transparent 8px,
transparent 12px
);
}
}
&__top{
width: 200px;
height: 30px;
transform: rotateX( 90deg) translateZ(99px);
background-image: linear-gradient(to bottom, darken($water-3, 20), darken($water-3, 25));
opacity: .9;
position: relative;
&::before{
content: '';
position: absolute;
height: 15px;
width: 200px;
bottom: -15px;
background-image:
repeating-linear-gradient(
to right,
white 0px,
white 8px,
transparent 8px,
transparent 12px
);
}
}
&__bottom{
width: 200px;
height: 30px;
transform: rotateX(-90deg) translateZ(100px);
background-image:
linear-gradient(
to top,
$ground-1 0px,
$ground-1 3px,
$grass-1 3px,
$grass-1 6px,
$water-3 6px,
$water-3 9px,
$water-1 9px,
$water-1 25px,
$water-0 30px
);
opacity: .9;
}
}
/**/
.e1{
display: flex;
justify-content: center;
align-items: center;
position: relative;
width: 100px;
height: 100px;
margin: 0 20px;
&__front{
width: 100px;
height: 100px;
transform: rotateY(0deg) translateZ(200px);
background-color: $e1-1;
border: 8px solid white;
border-top: 8px solid darken(white, 3);
border-left: 8px solid darken(white, 7);
box-shadow:
inset -5px 5px 0 $e1-4,
inset -12px 12px 0 rgba($e1-4, .2),
;
background-image: linear-gradient(30deg, $e1-1, darken($e1-1, 10));
}
&__back{
transform: rotateY(180deg) translateZ(-1px);
width: 100px;
height: 100px;
background-color: $e1-2;
box-shadow:
30px -10px 0 rgba($street-2, .25),
30px 0px 0 rgba($street-2, .25),
0px 4px 0 rgba($street-2, .25),
30px 4px 0 rgba($street-2, .25)
;
}
&__right{
width: 200px;
height: 100px;
transform: rotateY(90deg) translateZ(50px) translateX(-100px);
background-color: $e1-2;
}
&__left{
display: flex;
flex-direction: column;
flex-wrap: wrap;
justify-content: center;
align-content: flex-end;
padding-right: 10px;
width: 200px;
height: 100px;
transform: rotateY(-90deg) translateZ(50px) translateX(100px);
border-bottom: 5px solid lighten($e1-2, 5);
border-top: 5px solid lighten($e1-2, 5);
box-shadow: inset -3px 2px 0 $e1-3;
background-color: $e1-3;
background-image:
linear-gradient(to right, transparent 70%, lighten($e1-3, 4) 70%),
linear-gradient(to bottom, rgba($e1-3, .2) 90%, lighten($e1-3, 4) 90%)
;
background-size: 4px 4px, 10px 4px;
&::before{
content: '';
position: absolute;
width: 100%;
height: 100%;
background-image: linear-gradient(to left, transparent 80%, rgba($e1-4, .6) );
}
.e1__window{
box-shadow: inset 1px 1px 0 $e1-4;
background-color: darken(white, 12);
}
}
&__top{
width: 100px;
height: 200px;
transform: rotateX( 90deg) translateZ(50px) translateY(100px);
background-color: $e1-3;
}
&__bottom{
display: flex;
flex-wrap: wrap;
justify-content: center;
align-content: flex-start;
width: 100px;
height: 200px;
transform: rotateX(-90deg) translateZ(50px) translateY(-100px);
padding-top: 10px;
border-right: 5px solid darken($e1-1, 3);
border-left: 5px solid lighten($e1-1, 7);
box-shadow: inset -3px 2px 0 $e1-2;
background-color: $e1-1;
background-image:
linear-gradient(to bottom, transparent 70%, lighten($e1-1, 4) 70%),
linear-gradient(to right, rgba($e1-1, .2) 90%, lighten($e1-1, 4) 90%)
;
background-size: 4px 4px, 10px 4px;
&::before{
content: '';
position: absolute;
width: 100%;
height: 100%;
background-image: linear-gradient(to bottom, transparent 80%, rgba($e1-2, .8) );
}
}
&__window,
&__door{
height: 15px;
width: 15px;
margin: 7px;
background-color: $window-1;
box-shadow: inset -1px 1px 0 $e1-2;
}
&__window{
background-color: white;
}
&__door{
height: 30px;
margin-top: 15px;
}
}
.e2{
display: flex;
justify-content: center;
align-items: center;
position: relative;
width: 150px;
height: 100px;
&-c{ display: flex; }
&:nth-of-type(2){
position: absolute;
transform: translateZ(50px) ;
}
&__front{
width: 180px;
height: 130px;
transform: rotateY(0deg) translateZ(50px);
background-color: $bg-1;
border-radius: 8px;
border-left: 8px solid darken($bg-1, 3);
}
&__back{
transform: rotateY(180deg) translateZ(-1px);
width: 150px;
height: 100px;
background-color: $e1-2;
box-shadow:
20px -10px 0 rgba($street-2, .25),
20px 0px 0 rgba($street-2, .35),
20px 4px 0 rgba($street-2, .25)
;
}
&__right{
width: 50px;
height: 100px;
transform: rotateY(90deg) translateZ(75px) translateX(-20px);
background-color: $e1-1;
}
&__left{
width: 50px;
height: 100px;
transform: rotateY(-90deg) translateZ(75px) translateX(20px);
background-color: $e1-3;
&::before{
content: '';
position: absolute;
width: 100%;
height: 100%;
background-image: linear-gradient(to left, transparent , rgba($e1-4, .9) );
}
}
&__top{
width: 150px;
height: 50px;
transform: rotateX( 90deg) translateZ(50px) translateY(20px);
background-color: $e1-3;
}
&__bottom{
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: center;
width: 150px;
height: 50px;
transform: rotateX(-90deg) translateZ(50px) translateY(-20px);
padding-top: 10px;
background-color: $e1-1;
background-image:
linear-gradient(to bottom, transparent 50%, lighten($e1-1, 4) 50%),
linear-gradient(to right, rgba($e1-1, 1) 50%, lighten($e1-1, 2) 50%)
;
background-size: 4px 4px, 4px 4px;
overflow: hidden;
&::before{
content: '';
position: absolute;
width: 100%;
height: 100%;
background-image: linear-gradient(to bottom, transparent 50% , $e1-4 );
}
.e1__window{
height: 13px;
width: 13px;
}
.e1__door{
margin-top: 5px;
}
}
}
.lampposts{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.lamppost{
position: absolute;
right: 45px;
top: 16px;
&:nth-of-type(2){
right: 300px;
}
&:nth-of-type(3){
top: 104px;
right: 45px;
}
&:nth-of-type(4){
top: 104px;
right: 300px;
}
}
.lamp{
display: flex;
justify-content: center;
align-items: center;
position: absolute;
width: 10px;
height: 10px;
transform: translateZ(1px) ;
&__front{
width: 4px;
height: 4px;
transform: rotateY(0deg) translateZ(40px);
background-color: lighten($street-1, 10);
}
&__back{
transform: rotateY(180deg) translateZ(0px);
width: 4px;
height: 4px;
background-color: lighten($street-1, 10);
&::before{
content: '';
position: absolute;
height: 6px;
width: 40px;
background-image: linear-gradient(to right, rgba($street-2, .2), rgba($street-2, .1) );
transform: skewY(-30deg);
transform-origin: center left;
}
}
&__right{
width: 40px;
height: 4px;
transform: rotateY(90deg) translateZ(-2px) translateX(-20px);
background-color: darken($street-1, 10);
}
&__left{
width: 40px;
height: 4px;
transform: rotateY(-90deg) translateZ(-2px) translateX(20px);
background-color: lighten($street-1, 10);
}
&__top{
width: 4px;
height: 40px;
transform: rotateX( 90deg) translateZ(0px) translateY(20px);
background-color: darken($street-1, 5);
}
&__bottom{
width: 4px;
height: 40px;
transform: rotateX(-90deg) translateZ(2px) translateY(-20px);
background-color: lighten($street-1, 10);
}
}
.light{
display: flex;
justify-content: center;
align-items: center;
position: absolute;
width: 10px;
height: 10px;
transform: translateZ(40px) ;
&__front{
width: 8px;
height: 8px;
transform: rotateY(0deg) translateZ(8px);
background-color: $light-1;
}
&__back{
transform: rotateY(180deg) translateZ(0px);
width: 8px;
height: 8px;
background-color: $light-1;
}
&__right{
width: 8px;
height: 8px;
transform: rotateY(90deg) translateZ(-4px) translateX(-4px);
background-color: $light-3;
}
&__left{
width: 8px;
height: 8px;
transform: rotateY(-90deg) translateZ(-4px) translateX(4px);
background-color: $light-1;
}
&__top{
width: 8px;
height: 8px;
transform: rotateX( 90deg) translateZ(4px) translateY(4px);
background-color: $light-3;
}
&__bottom{
width: 8px;
height: 8px;
transform: rotateX(-90deg) translateZ(4px) translateY(-4px);
background-color: $light-2;
}
}
/*
Original image: https://i.pinimg.com/originals/d5/89/e4/d589e42554245e0b05760c773fe91045.png
*/
const m = document.querySelector("#m");
const b = document.querySelector("#b");
let base = (e) => {
var x = e.pageX / window.innerWidth - 0.5;
var y = e.pageY / window.innerHeight - 0.5;
b.style.transform = `
perspective(10000px)
rotateX(${ y * 10 + 60}deg)
rotateZ(-${ x * 10 + 45}deg)
`;
}
m.addEventListener("mousemove", base);
External CSS
This Pen doesn't use any external CSS resources.
External JavaScript
This Pen doesn't use any external JavaScript resources.