/***********************/ /***********************/ /************************/ /* Mixin para crear cubo ( Caras siempre al frente ) */ /************************/ /***********************/ /***********************/ /**/ *, *::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; cursor: pointer; } .face { position: absolute; } /***************/ .house { position: absolute; width: 72vw; height: 48vw; transform: perspective(20000px) rotateX(75deg) rotateZ(35deg) translateZ(-18vw); transition: transform 0.1s linear; } .shadows { width: 100%; height: 100%; } .shadow-a { position: absolute; right: 0; bottom: 0; width: 130%; height: 103%; transform-origin: top right; transform: skewY(-3deg); background-color: #686688; box-shadow: -2vw 2vw 3vw #686688; filter: blur(1vw); } .shadow-b { position: absolute; top: 0; width: 100%; height: 101.5%; background-color: #5f5d7c; } /***************/ /***************/ .al { width: 6vw; height: 48vw; position: absolute; left: 0; top: 0; } .al__front { width: 60vw; height: 0.8vw; transform-origin: bottom left; transform: rotateX(-90deg) translateZ(47.2vw); } .al__back { width: 60vw; height: 0.8vw; transform-origin: top left; transform: rotateX(-90deg) rotateY(180deg) translateX(-60vw) translateY(-0.8vw); } .al__right { width: 48vw; height: 0.8vw; transform-origin: top left; transform: rotateY(90deg) rotateZ(-90deg) translateZ(60vw) translateX(-48vw) translateY(-0.8vw); } .al__left { width: 48vw; height: 0.8vw; transform-origin: top left; transform: rotateY(-90deg) rotateZ(90deg) translateY(-0.8vw); } .al__top { width: 60vw; height: 48vw; transform-origin: top left; transform: translateZ(0.8vw); } .al__bottom { width: 60vw; height: 48vw; transform-origin: top left; transform: rotateY(180deg) translateX(-60vw); } .al__front { background-image: linear-gradient(to right, #8985ad, #c4c2d6); } .al__back { background-color: #c4c2d6; } .al__right { background-color: #fbfbfb; } .al__left { background-color: #7a76a3; } .al__top { background-image: linear-gradient(to right, #a7a4c2 40%, #e5e5e5, #f2f2f2); } .al__top::before { content: ""; position: absolute; bottom: 0; width: 26vw; height: 14vw; background-image: linear-gradient(-135deg, transparent 20%, rgba(169, 215, 207, 0.75)); } .al__top::after { content: ""; position: absolute; bottom: 2vw; left: 12vw; width: 10vw; height: 10vw; border-radius: 50%; background-image: radial-gradient(rgba(251, 251, 251, 0.25), transparent); filter: blur(1.4vw); } .al__bottom { background-color: #c4c2d6; } .ab { width: 16vw; height: 16vw; position: absolute; right: 0; bottom: 0; } .ab__front { width: 16vw; height: 0.8vw; transform-origin: bottom left; transform: rotateX(-90deg) translateZ(15.2vw); } .ab__back { width: 16vw; height: 0.8vw; transform-origin: top left; transform: rotateX(-90deg) rotateY(180deg) translateX(-16vw) translateY(-0.8vw); } .ab__right { width: 16vw; height: 0.8vw; transform-origin: top left; transform: rotateY(90deg) rotateZ(-90deg) translateZ(16vw) translateX(-16vw) translateY(-0.8vw); } .ab__left { width: 16vw; height: 0.8vw; transform-origin: top left; transform: rotateY(-90deg) rotateZ(90deg) translateY(-0.8vw); } .ab__top { width: 16vw; height: 16vw; transform-origin: top left; transform: translateZ(0.8vw); } .ab__bottom { width: 16vw; height: 16vw; transform-origin: top left; transform: rotateY(180deg) translateX(-16vw); } .ab__front { background-color: #c4c2d6; } .ab__back { background-color: #c4c2d6; } .ab__right { background-color: #fbfbfb; } .ab__left { background-color: #fbfbfb; } .ab__top { background-color: #f2f2f2; } .ab__bottom { background-color: #c4c2d6; } .at { width: 16vw; height: 8vw; position: absolute; right: 0; top: 0; } .at__front { width: 16vw; height: 0.8vw; transform-origin: bottom left; transform: rotateX(-90deg) translateZ(7.2vw); } .at__back { width: 16vw; height: 0.8vw; transform-origin: top left; transform: rotateX(-90deg) rotateY(180deg) translateX(-16vw) translateY(-0.8vw); } .at__right { width: 8vw; height: 0.8vw; transform-origin: top left; transform: rotateY(90deg) rotateZ(-90deg) translateZ(16vw) translateX(-8vw) translateY(-0.8vw); } .at__left { width: 8vw; height: 0.8vw; transform-origin: top left; transform: rotateY(-90deg) rotateZ(90deg) translateY(-0.8vw); } .at__top { width: 16vw; height: 8vw; transform-origin: top left; transform: translateZ(0.8vw); } .at__bottom { width: 16vw; height: 8vw; transform-origin: top left; transform: rotateY(180deg) translateX(-16vw); } .at__front { background-color: #c4c2d6; } .at__back { background-color: #c4c2d6; } .at__right { background-color: #fbfbfb; } .at__left { background-color: #fbfbfb; } .at__top { background-color: #f2f2f2; } .at__bottom { background-color: #c4c2d6; } .ac { width: 12vw; height: 24vw; position: absolute; right: 0; top: 8vw; } .ac__front { width: 12vw; height: 2vw; transform-origin: bottom left; transform: rotateX(-90deg) translateZ(22vw); } .ac__back { width: 12vw; height: 2vw; transform-origin: top left; transform: rotateX(-90deg) rotateY(180deg) translateX(-12vw) translateY(-2vw); } .ac__right { width: 24vw; height: 2vw; transform-origin: top left; transform: rotateY(90deg) rotateZ(-90deg) translateZ(12vw) translateX(-24vw) translateY(-2vw); } .ac__left { width: 24vw; height: 2vw; transform-origin: top left; transform: rotateY(-90deg) rotateZ(90deg) translateY(-2vw); } .ac__top { width: 12vw; height: 24vw; transform-origin: top left; transform: translateZ(2vw); } .ac__bottom { width: 12vw; height: 24vw; transform-origin: top left; transform: rotateY(180deg) translateX(-12vw); } .ac .face { opacity: 0.9; } .ac__front { background-color: #4d6d98; opacity: 0.75; } .ac__back { background-color: #4d6d98; } .ac__right { background-image: linear-gradient(to top, #6187be, #7095c9); } .ac__left { background-color: #16273c; } .ac__top { opacity: 0.75; background-image: linear-gradient(to right, #7095c9 0, #7095c9 5%, #6187be 20%, #6187be 30%, #7095c9 40%, #7095c9 65%, #658dc5 70%, #658dc5 72%, #7095c9 85%); box-shadow: inset 1vw 1vw 4vw rgba(251, 251, 251, 0.5); } .ac__top::before { content: ""; position: absolute; width: 40%; height: 100%; overflow: hidden; background-image: linear-gradient(to bottom, transparent 0, transparent 10%, rgba(97, 135, 190, 0.9) 15%, rgba(97, 135, 190, 0.9) 40%, rgba(251, 251, 251, 0.2) 40%, rgba(251, 251, 251, 0.2) 50%, transparent 60%); filter: blur(0.3vw); } .ac__bottom { background-color: #4d6d98; } .ac__bottom::before { content: ""; position: absolute; width: 100%; height: 100%; box-shadow: -0.5vw 0.5vw 2vw #234062; } /***************/ /***************/ .bce { width: 34vw; height: 41vw; position: absolute; right: 12vw; top: 0; transform: translateZ(0.82vw); } .bce__front { width: 34vw; height: 1vw; transform-origin: bottom left; transform: rotateX(-90deg) translateZ(43vw); } .bce__back { width: 34vw; height: 1vw; transform-origin: top left; transform: rotateX(-90deg) rotateY(180deg) translateX(-34vw) translateY(-1vw); } .bce__right { width: 44vw; height: 1vw; transform-origin: top left; transform: rotateY(90deg) rotateZ(-90deg) translateZ(34vw) translateX(-44vw) translateY(-1vw); } .bce__left { width: 44vw; height: 1vw; transform-origin: top left; transform: rotateY(-90deg) rotateZ(90deg) translateY(-1vw); } .bce__top { width: 34vw; height: 44vw; transform-origin: top left; transform: translateZ(1vw); } .bce__bottom { width: 34vw; height: 44vw; transform-origin: top left; transform: rotateY(180deg) translateX(-34vw); } .bce__front { background-image: linear-gradient(to right, #a7a4c2, #c4c2d6); } .bce__back { background-color: #c4c2d6; } .bce__right { background-color: #f2f2f2; } .bce__left { background-color: #c4c2d6; } .bce__top { background-image: linear-gradient(135deg, #a7a4c2 60%, #f2f2f2); } .bce__bottom { background-color: #c4c2d6; } .bce__bottom::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 101%; background-color: #675D6E; filter: blur(0.7vw); } .bci { width: 32vw; height: 42vw; position: absolute; right: 12vw; top: 0; transform: translateZ(1.84vw); } .bci__front { width: 32vw; height: 1vw; transform-origin: bottom left; transform: rotateX(-90deg) translateZ(41vw); } .bci__back { width: 32vw; height: 1vw; transform-origin: top left; transform: rotateX(-90deg) rotateY(180deg) translateX(-32vw) translateY(-1vw); } .bci__right { width: 42vw; height: 1vw; transform-origin: top left; transform: rotateY(90deg) rotateZ(-90deg) translateZ(32vw) translateX(-42vw) translateY(-1vw); } .bci__left { width: 42vw; height: 1vw; transform-origin: top left; transform: rotateY(-90deg) rotateZ(90deg) translateY(-1vw); } .bci__top { width: 32vw; height: 42vw; transform-origin: top left; transform: translateZ(1vw); } .bci__bottom { width: 32vw; height: 42vw; transform-origin: top left; transform: rotateY(180deg) translateX(-32vw); } .bci__front { background-image: linear-gradient(to right, #a7a4c2, #c4c2d6); } .bci__back { background-color: #c4c2d6; } .bci__right { background-color: #f2f2f2; } .bci__left { background-color: #c4c2d6; } .bci__top { background-image: linear-gradient(135deg, #a7a4c2 60%, #f2f2f2); } .bci__top::before { content: ""; position: absolute; width: 100%; height: 32.8vw; background-color: #d7d6ea; } .bci__top::after { content: ""; position: absolute; bottom: 3vw; left: 2vw; width: 20vw; height: 7vw; border-radius: 50%; background-image: radial-gradient(#badfd9, transparent); filter: blur(1vw); } .bci__bottom { background-color: #c4c2d6; } .bci__bottom::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 101%; background-color: #675D6E; filter: blur(0.7vw); } .bl { width: 26vw; height: 34vw; position: absolute; left: 0; top: 0; transform: translateZ(0.82vw); } .bl__front { width: 26.2vw; height: 1vw; transform-origin: bottom left; transform: rotateX(-90deg) translateZ(33vw); } .bl__back { width: 26.2vw; height: 1vw; transform-origin: top left; transform: rotateX(-90deg) rotateY(180deg) translateX(-26.2vw) translateY(-1vw); } .bl__right { width: 34vw; height: 1vw; transform-origin: top left; transform: rotateY(90deg) rotateZ(-90deg) translateZ(26.2vw) translateX(-34vw) translateY(-1vw); } .bl__left { width: 34vw; height: 1vw; transform-origin: top left; transform: rotateY(-90deg) rotateZ(90deg) translateY(-1vw); } .bl__top { width: 26.2vw; height: 34vw; transform-origin: top left; transform: translateZ(1vw); } .bl__bottom { width: 26.2vw; height: 34vw; transform-origin: top left; transform: rotateY(180deg) translateX(-26.2vw); } .bl__front { background-image: linear-gradient(to right, #6c6799, #a7a4c2); } .bl__back { background-color: #c4c2d6; } .bl__right { background-color: #f2f2f2; } .bl__left { background-color: #fbfbfb; } .bl__top { background-color: #d7d6ea; } .bl__top::before { content: ""; position: absolute; top: 4vw; left: 7vw; width: 24vw; height: 24vw; border-radius: 50%; background-color: rgba(222, 245, 241, 0.35); filter: blur(1.9vw); } .bl__bottom { background-color: #c4c2d6; } .bl__bottom::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 102%; background-color: #8985ad; box-shadow: 0vw 0.5vw 2vw #8985ad; } .bt { width: 8vw; height: 8vw; position: absolute; right: 4vw; top: 0; transform: translateZ(0.82vw); } .bt__front { width: 8vw; height: 2.2vw; transform-origin: bottom left; transform: rotateX(-90deg) translateZ(5.8vw); } .bt__back { width: 8vw; height: 2.2vw; transform-origin: top left; transform: rotateX(-90deg) rotateY(180deg) translateX(-8vw) translateY(-2.2vw); } .bt__right { width: 8vw; height: 2.2vw; transform-origin: top left; transform: rotateY(90deg) rotateZ(-90deg) translateZ(8vw) translateX(-8vw) translateY(-2.2vw); } .bt__left { width: 8vw; height: 2.2vw; transform-origin: top left; transform: rotateY(-90deg) rotateZ(90deg) translateY(-2.2vw); } .bt__top { width: 8vw; height: 8vw; transform-origin: top left; transform: translateZ(2.2vw); } .bt__bottom { width: 8vw; height: 8vw; transform-origin: top left; transform: rotateY(180deg) translateX(-8vw); } .bt__front { background-image: linear-gradient(to top, #9894b7 50%, #cac8da); } .bt__back { background-color: #c4c2d6; } .bt__right { background-color: #f2f2f2; } .bt__left { background-color: #fbfbfb; } .bt__top { background-color: #e5e5e5; } .bt__bottom { background-color: #c4c2d6; } .bbe { width: 12vw; height: 12vw; position: absolute; right: 0; bottom: 4vw; transform: translateZ(0.82vw); } .bbe__front { width: 12vw; height: 1vw; transform-origin: bottom left; transform: rotateX(-90deg) translateZ(11vw); } .bbe__back { width: 12vw; height: 1vw; transform-origin: top left; transform: rotateX(-90deg) rotateY(180deg) translateX(-12vw) translateY(-1vw); } .bbe__right { width: 12vw; height: 1vw; transform-origin: top left; transform: rotateY(90deg) rotateZ(-90deg) translateZ(12vw) translateX(-12vw) translateY(-1vw); } .bbe__left { width: 12vw; height: 1vw; transform-origin: top left; transform: rotateY(-90deg) rotateZ(90deg) translateY(-1vw); } .bbe__top { width: 12vw; height: 12vw; transform-origin: top left; transform: translateZ(1vw); } .bbe__bottom { width: 12vw; height: 12vw; transform-origin: top left; transform: rotateY(180deg) translateX(-12vw); } .bbe__front { background-color: #c4c2d6; } .bbe__back { background-color: #c4c2d6; } .bbe__right { background-color: #f2f2f2; } .bbe__left { background-color: #fbfbfb; } .bbe__top { background-color: #f6f6f6; } .bbe__bottom { background-color: #fbfbfb; } .bbe__bottom::before { content: ""; position: absolute; top: 0; right: 0; width: 95%; height: 104%; background-color: #675D6E; filter: blur(0.7vw); } .bbi { width: 8vw; height: 10vw; position: absolute; right: 4vw; bottom: 6vw; transform: translateZ(1.84vw); } .bbi__front { width: 8vw; height: 1vw; transform-origin: bottom left; transform: rotateX(-90deg) translateZ(9vw); } .bbi__back { width: 8vw; height: 1vw; transform-origin: top left; transform: rotateX(-90deg) rotateY(180deg) translateX(-8vw) translateY(-1vw); } .bbi__right { width: 10vw; height: 1vw; transform-origin: top left; transform: rotateY(90deg) rotateZ(-90deg) translateZ(8vw) translateX(-10vw) translateY(-1vw); } .bbi__left { width: 10vw; height: 1vw; transform-origin: top left; transform: rotateY(-90deg) rotateZ(90deg) translateY(-1vw); } .bbi__top { width: 8vw; height: 10vw; transform-origin: top left; transform: translateZ(1vw); } .bbi__bottom { width: 8vw; height: 10vw; transform-origin: top left; transform: rotateY(180deg) translateX(-8vw); } .bbi__front { background-color: #c4c2d6; } .bbi__back { background-color: #c4c2d6; } .bbi__right { background-color: #f2f2f2; } .bbi__left { background-color: #fbfbfb; } .bbi__top { background-color: #ededed; } .bbi__bottom { background-color: #fbfbfb; } .bbi__bottom::before { content: ""; position: absolute; top: 0; right: 0; width: 95%; height: 104%; background-color: #675D6E; filter: blur(1vw); } /***************/ /***************/ .cl { width: 10vw; height: 6vw; position: absolute; left: 0; top: 0; transform: translateZ(0.82vw); } .cl__front { width: 7vw; height: 24vw; transform-origin: bottom left; transform: rotateX(-90deg) translateZ(14vw); } .cl__back { width: 7vw; height: 24vw; transform-origin: top left; transform: rotateX(-90deg) rotateY(180deg) translateX(-7vw) translateY(-24vw); } .cl__right { width: 38vw; height: 24vw; transform-origin: top left; transform: rotateY(90deg) rotateZ(-90deg) translateZ(7vw) translateX(-38vw) translateY(-24vw); } .cl__left { width: 38vw; height: 24vw; transform-origin: top left; transform: rotateY(-90deg) rotateZ(90deg) translateY(-24vw); } .cl__top { width: 7vw; height: 38vw; transform-origin: top left; transform: translateZ(24vw); } .cl__bottom { width: 7vw; height: 38vw; transform-origin: top left; transform: rotateY(180deg) translateX(-7vw); } .cl__front { display: flex; justify-content: center; background-image: linear-gradient(to bottom, #c4c2d6, #9894b7); overflow: hidden; } .cl__front::after { content: ""; position: absolute; left: 0; bottom: -2.2vw; width: 200%; height: 6vw; background-image: linear-gradient(to right, rgba(222, 245, 241, 0.3), rgba(196, 194, 214, 0.25)); filter: blur(0.35vw); transform: rotateZ(-30deg); } .cl__back { background-color: #c4c2d6; } .cl__right { background-image: linear-gradient(to top, #a7a4c2, #8985ad, #cbe7e3 70%); } .cl__right::before { content: ""; position: absolute; right: 0; width: calc(100% - 5vw); height: 100%; background-image: linear-gradient(to bottom, #fbfbfb, #cbe7e3 15%, #d9d9d9 80%, #a7a4c2); filter: blur(1vw); } .cl__right .lamp:nth-of-type(1) { left: 25%; } .cl__right .lamp:nth-of-type(2) { left: 50%; } .cl__right .lamp:nth-of-type(3) { left: 75%; } .cl__left { background-image: linear-gradient(to top, #8985ad, #6c6799); } .cl__top { background-color: #b5b3cc; } .cl__bottom { background-color: #c4c2d6; } .cl__bottom::before { content: ""; position: absolute; top: 0; right: 0; width: 115%; height: 103%; background-color: rgba(103, 93, 110, 0.75); filter: blur(1vw); } .cc { width: 2vw; height: 38vw; position: absolute; left: 30vw; top: 0; transform: translateZ(25vw); } .cc__front { width: 2vw; height: 25vw; transform-origin: bottom left; transform: rotateX(-90deg) translateZ(13vw); } .cc__back { width: 2vw; height: 25vw; transform-origin: top left; transform: rotateX(-90deg) rotateY(180deg) translateX(-2vw) translateY(-25vw); } .cc__right { width: 38vw; height: 25vw; transform-origin: top left; transform: rotateY(90deg) rotateZ(-90deg) translateZ(2vw) translateX(-38vw) translateY(-25vw); } .cc__left { width: 38vw; height: 25vw; transform-origin: top left; transform: rotateY(-90deg) rotateZ(90deg) translateY(-25vw); } .cc__top { width: 2vw; height: 38vw; transform-origin: top left; transform: translateZ(25vw); } .cc__bottom { width: 2vw; height: 38vw; transform-origin: top left; transform: rotateY(180deg) translateX(-2vw); } .cc__front { background-image: linear-gradient(to bottom, #b5b3cc, #c4c2d6 10%); } .cc__back { background-color: #c4c2d6; } .cc__right { background-color: #fbfbfb; } .cc__left { background-image: linear-gradient(to top, #8985ad, #6c6799); } .cc__top { background-color: #f2f2f2; } .cc__bottom { background-color: #c4c2d6; } .ccl { width: 2vw; height: 6vw; position: absolute; left: 30vw; top: 32vw; transform: translateZ(2.86vw); } .ccl__front { width: 2vw; height: 23vw; transform-origin: bottom left; transform: rotateX(-90deg) translateZ(-17vw); } .ccl__back { width: 2vw; height: 23vw; transform-origin: top left; transform: rotateX(-90deg) rotateY(180deg) translateX(-2vw) translateY(-23vw); } .ccl__right { width: 6vw; height: 23vw; transform-origin: top left; transform: rotateY(90deg) rotateZ(-90deg) translateZ(2vw) translateX(-6vw) translateY(-23vw); } .ccl__left { width: 6vw; height: 23vw; transform-origin: top left; transform: rotateY(-90deg) rotateZ(90deg) translateY(-23vw); } .ccl__top { width: 2vw; height: 6vw; transform-origin: top left; transform: translateZ(23vw); } .ccl__bottom { width: 2vw; height: 6vw; transform-origin: top left; transform: rotateY(180deg) translateX(-2vw); } .ccl__front { background-image: linear-gradient(to top, #a7a4c2, #c4c2d6); } .ccl__back { background-color: #c4c2d6; } .ccl__right { background-image: linear-gradient(to bottom, #6c6799, #8985ad 70%, #badfd9); } .ccl__right::before { content: ""; position: absolute; top: -1vw; left: 0; width: 100%; height: 4vw; transform-origin: bottom left; transform: translateZ(0.1vw); background-image: linear-gradient(-45deg, #8985ad, #6c6799 80%, transparent 80%); } .ccl__left { background-image: linear-gradient(to top, #8985ad, #6c6799); } .ccl__top { background-color: #f2f2f2; } .ccl__bottom { background-color: #c4c2d6; } .ccl__bottom::before { content: ""; position: absolute; top: 0; right: 0; width: 102%; height: 101%; background-color: #675D6E; filter: blur(0.7vw); } .cml { width: 32vw; height: 38vw; position: absolute; left: 0; top: 0; transform: translateZ(24.82vw); } .cml__front { width: 32vw; height: 2vw; transform-origin: bottom left; transform: rotateX(-90deg) translateZ(36vw); } .cml__back { width: 32vw; height: 2vw; transform-origin: top left; transform: rotateX(-90deg) rotateY(180deg) translateX(-32vw) translateY(-2vw); } .cml__right { width: 38vw; height: 2vw; transform-origin: top left; transform: rotateY(90deg) rotateZ(-90deg) translateZ(32vw) translateX(-38vw) translateY(-2vw); } .cml__left { width: 38vw; height: 2vw; transform-origin: top left; transform: rotateY(-90deg) rotateZ(90deg) translateY(-2vw); } .cml__top { width: 32vw; height: 38vw; transform-origin: top left; transform: translateZ(2vw); } .cml__bottom { width: 32vw; height: 38vw; transform-origin: top left; transform: rotateY(180deg) translateX(-32vw); } .cml__front { background-image: linear-gradient(to bottom, #bbb9d0, #c4c2d6); } .cml__back { background-color: #c4c2d6; } .cml__right { background-color: #fbfbfb; } .cml__left { background-color: #6c6799; } .cml__top { background-image: linear-gradient(to right, #8985ad, #a7a4c2 30%, #97cfc6); box-shadow: inset 0.6vw 0.6vw 4vw rgba(103, 93, 110, 0.1), inset -0.6vw 0.6vw 4vw rgba(103, 93, 110, 0.1), inset 0.6vw -0.6vw 4vw rgba(103, 93, 110, 0.1), inset -0.6vw -0.6vw 4vw rgba(103, 93, 110, 0.1); } .cml__bottom { background-color: #c4c2d6; } .cmr { width: 32vw; height: 36vw; position: absolute; left: 32vw; top: 0; transform: translateZ(24.82vw); } .cmr__front { width: 32vw; height: 2vw; transform-origin: bottom left; transform: rotateX(-90deg) translateZ(34vw); } .cmr__back { width: 32vw; height: 2vw; transform-origin: top left; transform: rotateX(-90deg) rotateY(180deg) translateX(-32vw) translateY(-2vw); } .cmr__right { width: 36vw; height: 2vw; transform-origin: top left; transform: rotateY(90deg) rotateZ(-90deg) translateZ(32vw) translateX(-36vw) translateY(-2vw); } .cmr__left { width: 36vw; height: 2vw; transform-origin: top left; transform: rotateY(-90deg) rotateZ(90deg) translateY(-2vw); } .cmr__top { width: 32vw; height: 36vw; transform-origin: top left; transform: translateZ(2vw); } .cmr__bottom { width: 32vw; height: 36vw; transform-origin: top left; transform: rotateY(180deg) translateX(-32vw); } .cmr__front { background-image: linear-gradient(to bottom, #b5b3cc, #c4c2d6); } .cmr__back { background-color: #c4c2d6; } .cmr__right { background-color: #fbfbfb; } .cmr__left { background-color: #c4c2d6; } .cmr__top { background-image: linear-gradient(to right, #f2f2f2, #ededed); } .cmr__top::before { content: ""; position: absolute; width: 100%; height: 100%; background-image: linear-gradient(48.5deg, #f7f7f7 50%, transparent 50%); opacity: 0.35; } .cmr__bottom { background-color: #c4c2d6; } .cmt { width: 24vw; height: 38vw; position: absolute; left: 6vw; top: 0; transform: translateZ(48vw); } .cmt__front { width: 24vw; height: 2vw; transform-origin: bottom left; transform: rotateX(-90deg) translateZ(36vw); } .cmt__back { width: 24vw; height: 2vw; transform-origin: top left; transform: rotateX(-90deg) rotateY(180deg) translateX(-24vw) translateY(-2vw); } .cmt__right { width: 38vw; height: 2vw; transform-origin: top left; transform: rotateY(90deg) rotateZ(-90deg) translateZ(24vw) translateX(-38vw) translateY(-2vw); } .cmt__left { width: 38vw; height: 2vw; transform-origin: top left; transform: rotateY(-90deg) rotateZ(90deg) translateY(-2vw); } .cmt__top { width: 24vw; height: 38vw; transform-origin: top left; transform: translateZ(2vw); } .cmt__bottom { width: 24vw; height: 38vw; transform-origin: top left; transform: rotateY(180deg) translateX(-24vw); } .cmt__front { background-image: linear-gradient(to bottom, #b5b3cc, #c4c2d6); } .cmt__back { background-color: #c4c2d6; } .cmt__right { background-color: #fbfbfb; } .cmt__left { background-color: #a7a4c2; } .cmt__top { background-color: #f2f2f2; } .cmt__bottom { background-color: #c4c2d6; } /***************/ /***************/ .dl { width: 4vw; height: 2vw; position: absolute; left: 43.8vw; bottom: 14vw; transform: translateZ(3vw); } .dl__front { width: 4vw; height: 22vw; transform-origin: bottom left; transform: rotateX(-90deg) translateZ(-20vw); } .dl__back { width: 4vw; height: 22vw; transform-origin: top left; transform: rotateX(-90deg) rotateY(180deg) translateX(-4vw) translateY(-22vw); } .dl__right { width: 2vw; height: 22vw; transform-origin: top left; transform: rotateY(90deg) rotateZ(-90deg) translateZ(4vw) translateX(-2vw) translateY(-22vw); } .dl__left { width: 2vw; height: 22vw; transform-origin: top left; transform: rotateY(-90deg) rotateZ(90deg) translateY(-22vw); } .dl__top { width: 4vw; height: 2vw; transform-origin: top left; transform: translateZ(22vw); } .dl__bottom { width: 4vw; height: 2vw; transform-origin: top left; transform: rotateY(180deg) translateX(-4vw); } .dl__front { background-image: linear-gradient(to bottom, #8985ad, #9894b7 35%, #a7a4c2 72%, #badfd9); } .dl__back { background-color: #c4c2d6; } .dl__right { background-color: #c4c2d6; } .dl__left { background-color: #9894b7; } .dl__top { background-color: #f2f2f2; } .dl__bottom { background-color: #c4c2d6; } .dl__bottom::before { content: ""; position: absolute; top: 0; right: 0; width: 102%; height: 101%; background-color: #675D6E; filter: blur(0.7vw); } .dm { width: 12vw; height: 2vw; position: absolute; left: 32vw; bottom: 14vw; transform: translateZ(17vw); } .dm__front { width: 12vw; height: 8vw; transform-origin: bottom left; transform: rotateX(-90deg) translateZ(-6vw); } .dm__back { width: 12vw; height: 8vw; transform-origin: top left; transform: rotateX(-90deg) rotateY(180deg) translateX(-12vw) translateY(-8vw); } .dm__right { width: 2vw; height: 8vw; transform-origin: top left; transform: rotateY(90deg) rotateZ(-90deg) translateZ(12vw) translateX(-2vw) translateY(-8vw); } .dm__left { width: 2vw; height: 8vw; transform-origin: top left; transform: rotateY(-90deg) rotateZ(90deg) translateY(-8vw); } .dm__top { width: 12vw; height: 2vw; transform-origin: top left; transform: translateZ(8vw); } .dm__bottom { width: 12vw; height: 2vw; transform-origin: top left; transform: rotateY(180deg) translateX(-12vw); } .dm__front { background-image: linear-gradient(to bottom, #8985ad, #9894b7); } .dm__back { background-color: #c4c2d6; } .dm__right { background-color: #fbfbfb; } .dm__left { background-color: #c4c2d6; } .dm__top { background-color: #f2f2f2; } .dm__bottom { background-color: #c4c2d6; } .dt { width: 16vw; height: 2vw; position: absolute; left: 28vw; top: 0; transform: translateZ(3vw); } .dt__front { width: 16vw; height: 22vw; transform-origin: bottom left; transform: rotateX(-90deg) translateZ(-20vw); } .dt__back { width: 16vw; height: 22vw; transform-origin: top left; transform: rotateX(-90deg) rotateY(180deg) translateX(-16vw) translateY(-22vw); } .dt__right { width: 2vw; height: 22vw; transform-origin: top left; transform: rotateY(90deg) rotateZ(-90deg) translateZ(16vw) translateX(-2vw) translateY(-22vw); } .dt__left { width: 2vw; height: 22vw; transform-origin: top left; transform: rotateY(-90deg) rotateZ(90deg) translateY(-22vw); } .dt__top { width: 16vw; height: 2vw; transform-origin: top left; transform: translateZ(22vw); } .dt__bottom { width: 16vw; height: 2vw; transform-origin: top left; transform: rotateY(180deg) translateX(-16vw); } .dt__front { background-color: #f2f2f2; } .dt__back { background-color: #c4c2d6; } .dt__right { background-color: #fbfbfb; } .dt__left { background-color: #f2f2f2; } .dt__top { background-color: #f2f2f2; } .dt__bottom { background-color: #c4c2d6; } /***************/ /***************/ .el { width: 22.8vw; height: 2vw; position: absolute; left: 7vw; bottom: 14vw; transform: translateZ(2vw); } .el__front { width: 22.8vw; height: 23vw; transform-origin: bottom left; transform: rotateX(-90deg) translateZ(-22vw); } .el__back { width: 22.8vw; height: 23vw; transform-origin: top left; transform: rotateX(-90deg) rotateY(180deg) translateX(-22.8vw) translateY(-23vw); } .el__right { width: 1vw; height: 23vw; transform-origin: top left; transform: rotateY(90deg) rotateZ(-90deg) translateZ(22.8vw) translateX(-1vw) translateY(-23vw); } .el__left { width: 1vw; height: 23vw; transform-origin: top left; transform: rotateY(-90deg) rotateZ(90deg) translateY(-23vw); } .el__top { width: 22.8vw; height: 1vw; transform-origin: top left; transform: translateZ(23vw); } .el__bottom { width: 22.8vw; height: 1vw; transform-origin: top left; transform: rotateY(180deg) translateX(-22.8vw); } .el__front { border: 0.2vw solid rgba(77, 109, 152, 0.5); overflow: hidden; background-image: repeating-linear-gradient(-45deg, rgba(97, 135, 190, 0.1) 2vw, rgba(112, 149, 201, 0.1) 3vw); } .ec { width: 28vw; height: 2vw; position: absolute; left: 32vw; bottom: 14vw; transform: translateZ(3vw); } .ec__front { width: 28vw; height: 22vw; transform-origin: bottom left; transform: rotateX(-90deg) translateZ(-21vw); } .ec__back { width: 28vw; height: 22vw; transform-origin: top left; transform: rotateX(-90deg) rotateY(180deg) translateX(-28vw) translateY(-22vw); } .ec__right { width: 1vw; height: 22vw; transform-origin: top left; transform: rotateY(90deg) rotateZ(-90deg) translateZ(28vw) translateX(-1vw) translateY(-22vw); } .ec__left { width: 1vw; height: 22vw; transform-origin: top left; transform: rotateY(-90deg) rotateZ(90deg) translateY(-22vw); } .ec__top { width: 28vw; height: 1vw; transform-origin: top left; transform: translateZ(22vw); } .ec__bottom { width: 28vw; height: 1vw; transform-origin: top left; transform: rotateY(180deg) translateX(-28vw); } .ec__front { border: 0.2vw solid rgba(77, 109, 152, 0.5); overflow: hidden; background-image: linear-gradient(to right, rgba(97, 135, 190, 0.1), rgba(112, 149, 201, 0.1)); } .er { width: 28vw; height: 2vw; position: absolute; left: 59.6vw; top: 0; transform: translateZ(3vw); } .er__front { width: 0.2vw; height: 22vw; transform-origin: bottom left; transform: rotateX(-90deg) translateZ(11.2vw); } .er__back { width: 0.2vw; height: 22vw; transform-origin: top left; transform: rotateX(-90deg) rotateY(180deg) translateX(-0.2vw) translateY(-22vw); } .er__right { width: 33.2vw; height: 22vw; transform-origin: top left; transform: rotateY(90deg) rotateZ(-90deg) translateZ(0.2vw) translateX(-33.2vw) translateY(-22vw); } .er__left { width: 33.2vw; height: 22vw; transform-origin: top left; transform: rotateY(-90deg) rotateZ(90deg) translateY(-22vw); } .er__top { width: 0.2vw; height: 33.2vw; transform-origin: top left; transform: translateZ(22vw); } .er__bottom { width: 0.2vw; height: 33.2vw; transform-origin: top left; transform: rotateY(180deg) translateX(-0.2vw); } .er__right { border: 0.2vw solid rgba(77, 109, 152, 0.5); overflow: hidden; background-image: linear-gradient(to right, rgba(97, 135, 190, 0.1), rgba(112, 149, 201, 0.1)); } .eb { width: 52.8vw; height: 2vw; position: absolute; left: 7vw; top: 0; transform: translateZ(2vw); } .eb__front { width: 52.8vw; height: 22.8vw; transform-origin: bottom left; transform: rotateX(-90deg) translateZ(-21.8vw); } .eb__back { width: 52.8vw; height: 22.8vw; transform-origin: top left; transform: rotateX(-90deg) rotateY(180deg) translateX(-52.8vw) translateY(-22.8vw); } .eb__right { width: 1vw; height: 22.8vw; transform-origin: top left; transform: rotateY(90deg) rotateZ(-90deg) translateZ(52.8vw) translateX(-1vw) translateY(-22.8vw); } .eb__left { width: 1vw; height: 22.8vw; transform-origin: top left; transform: rotateY(-90deg) rotateZ(90deg) translateY(-22.8vw); } .eb__top { width: 52.8vw; height: 1vw; transform-origin: top left; transform: translateZ(22.8vw); } .eb__bottom { width: 52.8vw; height: 1vw; transform-origin: top left; transform: rotateY(180deg) translateX(-52.8vw); } .eb__back { border: 0.2vw solid rgba(77, 109, 152, 0.5); overflow: hidden; background-image: linear-gradient(to right, rgba(97, 135, 190, 0.1), rgba(112, 149, 201, 0.1)); } /***************/ /***************/ .fl { width: 2vw; height: 16.9vw; position: absolute; left: 3vw; top: 2vw; transform: translateZ(33.5vw); } .fl__front { width: 0.5vw; height: 0.5vw; transform-origin: bottom left; transform: rotateX(-90deg) translateZ(33.3vw); } .fl__back { width: 0.5vw; height: 0.5vw; transform-origin: top left; transform: rotateX(-90deg) rotateY(180deg) translateX(-0.5vw) translateY(-0.5vw); } .fl__right { width: 33.8vw; height: 0.5vw; transform-origin: top left; transform: rotateY(90deg) rotateZ(-90deg) translateZ(0.5vw) translateX(-33.8vw) translateY(-0.5vw); } .fl__left { width: 33.8vw; height: 0.5vw; transform-origin: top left; transform: rotateY(-90deg) rotateZ(90deg) translateY(-0.5vw); } .fl__top { width: 0.5vw; height: 33.8vw; transform-origin: top left; transform: translateZ(0.5vw); } .fl__bottom { width: 0.5vw; height: 33.8vw; transform-origin: top left; transform: rotateY(180deg) translateX(-0.5vw); } .fl__front { background-color: #a7a4c2; } .fl__back { background-color: #c4c2d6; } .fl__right { background-image: linear-gradient(to bottom, #a7a4c2, #9591b5 50%); } .fl__left { background-color: #8985ad; } .fl__left::before { content: ""; position: absolute; top: 0.5vw; right: 0; width: 100%; height: 6.5vw; border: 0.2vw solid rgba(77, 109, 152, 0.5); } .fl__top { background-image: linear-gradient(to bottom, #a7a4c2, #e5e5e5); } .fl__bottom { background-color: #c4c2d6; } .fb, .ft { width: 10vw; height: 0.5vw; position: absolute; left: 3vw; bottom: 12.2vw; transform: translateZ(33.5vw); } .fb__front, .ft__front { width: 28vw; height: 0.5vw; transform-origin: bottom left; transform: rotateX(-90deg) translateZ(0vw); } .fb__back, .ft__back { width: 28vw; height: 0.5vw; transform-origin: top left; transform: rotateX(-90deg) rotateY(180deg) translateX(-28vw) translateY(-0.5vw); } .fb__right, .ft__right { width: 0.5vw; height: 0.5vw; transform-origin: top left; transform: rotateY(90deg) rotateZ(-90deg) translateZ(28vw) translateX(-0.5vw) translateY(-0.5vw); } .fb__left, .ft__left { width: 0.5vw; height: 0.5vw; transform-origin: top left; transform: rotateY(-90deg) rotateZ(90deg) translateY(-0.5vw); } .fb__top, .ft__top { width: 28vw; height: 0.5vw; transform-origin: top left; transform: translateZ(0.5vw); } .fb__bottom, .ft__bottom { width: 28vw; height: 0.5vw; transform-origin: top left; transform: rotateY(180deg) translateX(-28vw); } .fb__front, .ft__front { background-color: #a7a4c2; } .fb__front::before, .ft__front::before { content: ""; position: absolute; top: 0.5vw; left: 0.2vw; width: calc(100% - 0.5vw); height: 6.5vw; border: 0.2vw solid rgba(77, 109, 152, 0.5); background-image: linear-gradient(to right, rgba(97, 135, 190, 0.15), rgba(112, 149, 201, 0.15)); } .fb__back, .ft__back { background-color: #c4c2d6; } .fb__right, .ft__right { background-color: #fbfbfb; } .fb__left, .ft__left { background-color: #c4c2d6; } .fb__top, .ft__top { background-image: linear-gradient(to bottom, #97cfc6, #e5e5e5); } .fb__bottom, .ft__bottom { background-color: #c4c2d6; } .ft { top: 2vw; } /***************/ /***************/ .table { width: 6vw; height: 10vw; right: 21vw; bottom: 26vw; position: absolute; transform: translateZ(4.5vw); } .table__front { width: 6vw; height: 0.5vw; transform-origin: bottom left; transform: rotateX(-90deg) translateZ(9.5vw); } .table__back { width: 6vw; height: 0.5vw; transform-origin: top left; transform: rotateX(-90deg) rotateY(180deg) translateX(-6vw) translateY(-0.5vw); } .table__right { width: 10vw; height: 0.5vw; transform-origin: top left; transform: rotateY(90deg) rotateZ(-90deg) translateZ(6vw) translateX(-10vw) translateY(-0.5vw); } .table__left { width: 10vw; height: 0.5vw; transform-origin: top left; transform: rotateY(-90deg) rotateZ(90deg) translateY(-0.5vw); } .table__top { width: 6vw; height: 10vw; transform-origin: top left; transform: translateZ(0.5vw); } .table__bottom { width: 6vw; height: 10vw; transform-origin: top left; transform: rotateY(180deg) translateX(-6vw); } .table__front { background-color: #cdcbdc; } .table__back { background-color: #c4c2d6; } .table__right { background-color: #fbfbfb; } .table__left { background-color: #c4c2d6; } .table__top { background-color: #eaeaea; } .table__bottom { background-color: #c4c2d6; } .table::before { content: ""; position: absolute; left: -10%; top: -10%; width: 120%; height: 120%; background-color: #b5b3cc; filter: blur(1vw); transform: translateZ(-1.62vw); } .foot { width: 0.5vw; height: 0.5vw; position: absolute; } .foot__front { width: 0.5vw; height: 2vw; transform-origin: bottom left; transform: rotateX(-90deg) translateZ(-1.5vw); } .foot__back { width: 0.5vw; height: 2vw; transform-origin: top left; transform: rotateX(-90deg) rotateY(180deg) translateX(-0.5vw) translateY(-2vw); } .foot__right { width: 0.5vw; height: 2vw; transform-origin: top left; transform: rotateY(90deg) rotateZ(-90deg) translateZ(0.5vw) translateX(-0.5vw) translateY(-2vw); } .foot__left { width: 0.5vw; height: 2vw; transform-origin: top left; transform: rotateY(-90deg) rotateZ(90deg) translateY(-2vw); } .foot__top { width: 0.5vw; height: 0.5vw; transform-origin: top left; transform: translateZ(2vw); } .foot__bottom { width: 0.5vw; height: 0.5vw; transform-origin: top left; transform: rotateY(180deg) translateX(-0.5vw); } .foot__front { background-color: #cdcbdc; } .foot__back { background-color: #f2f2f2; } .foot__right { background-color: #c4c2d6; } .foot__left { background-color: #f2f2f2; } .foot__top { background-color: #c4c2d6; } .foot__bottom { background-color: #c4c2d6; } .foot:nth-of-type(1) { bottom: 0; right: 0; } .foot:nth-of-type(2) { bottom: 0; left: 0; } .foot:nth-of-type(3) { top: 0; right: 0; } .foot:nth-of-type(4) { top: 0; left: 0; } /***************/ /***************/ .lamp { position: absolute; top: 5vw; width: 1.5vw; height: 5vw; border-radius: 10vw; opacity: 0.95; background-color: #def5f1; box-shadow: 0.3vw 0.3vw 1.5vw rgba(186, 223, 217, 0.5), 0.3vw -0.3vw 1.5vw rgba(186, 223, 217, 0.5), -0.3vw 0.3vw 1.5vw rgba(186, 223, 217, 0.5), -0.3vw -0.3vw 1.5vw rgba(186, 223, 217, 0.5); filter: blur(0.3vw); } /***************/ /***************/ .kitchen { width: 4vw; height: 24vw; top: 6vw; left: 7vw; transform: translateZ(6vw); position: absolute; } .kitchen__front { width: 4vw; height: 0.5vw; transform-origin: bottom left; transform: rotateX(-90deg) translateZ(23.5vw); } .kitchen__back { width: 4vw; height: 0.5vw; transform-origin: top left; transform: rotateX(-90deg) rotateY(180deg) translateX(-4vw) translateY(-0.5vw); } .kitchen__right { width: 24vw; height: 0.5vw; transform-origin: top left; transform: rotateY(90deg) rotateZ(-90deg) translateZ(4vw) translateX(-24vw) translateY(-0.5vw); } .kitchen__left { width: 24vw; height: 0.5vw; transform-origin: top left; transform: rotateY(-90deg) rotateZ(90deg) translateY(-0.5vw); } .kitchen__top { width: 4vw; height: 24vw; transform-origin: top left; transform: translateZ(0.5vw); } .kitchen__bottom { width: 4vw; height: 24vw; transform-origin: top left; transform: rotateY(180deg) translateX(-4vw); } .kitchen__front { background-color: #a7a4c2; } .kitchen__back { background-color: #c4c2d6; } .kitchen__right { background-color: #fbfbfb; } .kitchen__left { background-color: #c4c2d6; } .kitchen__left::before { content: ""; position: absolute; width: 100%; top: 0.5vw; height: 2.5vw; background-color: rgba(154, 144, 161, 0.75); filter: blur(1vw); } .kitchen__top { background-image: linear-gradient(to right, #eaf9f6, #f2fbf9 60%); } .kitchen__bottom { background-color: #c4c2d6; } /***************/ /***************/ .couch { width: 10vw; height: 6vw; top: 1vw; left: 32vw; transform: translateZ(3vw); position: absolute; } .couch__front { width: 10vw; height: 4vw; transform-origin: bottom left; transform: rotateX(-90deg) translateZ(2vw); } .couch__back { width: 10vw; height: 4vw; transform-origin: top left; transform: rotateX(-90deg) rotateY(180deg) translateX(-10vw) translateY(-4vw); } .couch__right { width: 6vw; height: 4vw; transform-origin: top left; transform: rotateY(90deg) rotateZ(-90deg) translateZ(10vw) translateX(-6vw) translateY(-4vw); } .couch__left { width: 6vw; height: 4vw; transform-origin: top left; transform: rotateY(-90deg) rotateZ(90deg) translateY(-4vw); } .couch__top { width: 10vw; height: 6vw; transform-origin: top left; transform: translateZ(4vw); } .couch__bottom { width: 10vw; height: 6vw; transform-origin: top left; transform: rotateY(180deg) translateX(-10vw); } .couch__front { background-color: #d6d4e2; } .couch__back { background-color: #c4c2d6; } .couch__right { background-color: #fbfbfb; } .couch__left { background-color: #c4c2d6; } .couch__top { background-color: #eaeaea; } .couch__bottom { background-color: #c4c2d6; } .couch__bottom::before { content: ""; position: absolute; left: -10%; top: -10%; width: 120%; height: 120%; background-color: rgba(167, 164, 194, 0.5); filter: blur(0.5vw); } .couchb { width: 14vw; height: 2vw; bottom: 34vw; left: 12vw; transform: translateZ(2vw); position: absolute; } .couchb__front { width: 14vw; height: 1.5vw; transform-origin: bottom left; transform: rotateX(-90deg) translateZ(8.5vw); } .couchb__back { width: 14vw; height: 1.5vw; transform-origin: top left; transform: rotateX(-90deg) rotateY(180deg) translateX(-14vw) translateY(-1.5vw); } .couchb__right { width: 10vw; height: 1.5vw; transform-origin: top left; transform: rotateY(90deg) rotateZ(-90deg) translateZ(14vw) translateX(-10vw) translateY(-1.5vw); } .couchb__left { width: 10vw; height: 1.5vw; transform-origin: top left; transform: rotateY(-90deg) rotateZ(90deg) translateY(-1.5vw); } .couchb__top { width: 14vw; height: 10vw; transform-origin: top left; transform: translateZ(1.5vw); } .couchb__bottom { width: 14vw; height: 10vw; transform-origin: top left; transform: rotateY(180deg) translateX(-14vw); } .couchb__front { background-color: #d6d4e2; } .couchb__back { background-color: #c4c2d6; } .couchb__right { background-color: #fbfbfb; } .couchb__left { background-color: #c4c2d6; } .couchb__top { background-image: linear-gradient(to right, #eaf9f6, #f2fbf9 60%); } .couchb__bottom { background-color: #c4c2d6; } .couchb__bottom::before { content: ""; position: absolute; left: -10%; top: -10%; width: 120%; height: 120%; background-color: rgba(167, 164, 194, 0.5); filter: blur(0.5vw); } .couchc, .couchd { width: 10vw; height: 3vw; bottom: 13vw; left: 18vw; transform: translateZ(27vw); position: absolute; } .couchc__front, .couchd__front { width: 10vw; height: 3vw; transform-origin: bottom left; transform: rotateX(-90deg) translateZ(0vw); } .couchc__back, .couchd__back { width: 10vw; height: 3vw; transform-origin: top left; transform: rotateX(-90deg) rotateY(180deg) translateX(-10vw) translateY(-3vw); } .couchc__right, .couchd__right { width: 3vw; height: 3vw; transform-origin: top left; transform: rotateY(90deg) rotateZ(-90deg) translateZ(10vw) translateX(-3vw) translateY(-3vw); } .couchc__left, .couchd__left { width: 3vw; height: 3vw; transform-origin: top left; transform: rotateY(-90deg) rotateZ(90deg) translateY(-3vw); } .couchc__top, .couchd__top { width: 10vw; height: 3vw; transform-origin: top left; transform: translateZ(3vw); } .couchc__bottom, .couchd__bottom { width: 10vw; height: 3vw; transform-origin: top left; transform: rotateY(180deg) translateX(-10vw); } .couchc__front, .couchd__front { background-color: #c4c2d6; } .couchc__back, .couchd__back { background-color: #c4c2d6; } .couchc__right, .couchd__right { background-image: linear-gradient(to bottom, #caefe9, #def5f1, #f2f2f2); } .couchc__left, .couchd__left { background-color: #9894b7; } .couchc__top, .couchd__top { background-image: linear-gradient(to left, #caefe9, #def5f1, #f2f2f2); } .couchc__bottom, .couchd__bottom { background-color: #c4c2d6; } .couchc__bottom::before, .couchd__bottom::before { content: ""; position: absolute; left: -10%; top: -10%; width: 120%; height: 120%; background-color: rgba(108, 103, 153, 0.5); filter: blur(0.5vw); } .couchd { top: 3vw; } /***************/ /***************/ .picture { width: 1vw; height: 6vw; bottom: 28vw; left: 6.7vw; transform: translateZ(12vw); position: absolute; } .picture__front { width: 0.7vw; height: 8vw; transform-origin: bottom left; transform: rotateX(-90deg) translateZ(-2vw); } .picture__back { width: 0.7vw; height: 8vw; transform-origin: top left; transform: rotateX(-90deg) rotateY(180deg) translateX(-0.7vw) translateY(-8vw); } .picture__right { width: 6vw; height: 8vw; transform-origin: top left; transform: rotateY(90deg) rotateZ(-90deg) translateZ(0.7vw) translateX(-6vw) translateY(-8vw); } .picture__left { width: 6vw; height: 8vw; transform-origin: top left; transform: rotateY(-90deg) rotateZ(90deg) translateY(-8vw); } .picture__top { width: 0.7vw; height: 6vw; transform-origin: top left; transform: translateZ(8vw); } .picture__bottom { width: 0.7vw; height: 6vw; transform-origin: top left; transform: rotateY(180deg) translateX(-0.7vw); } .picture__front { background-color: #c4c2d6; } .picture__back { background-color: #c4c2d6; } .picture__right { display: flex; justify-content: center; align-items: center; background-image: linear-gradient(to bottom, #def5f1, #fbfbfb); } .picture__right::before, .picture__right::after { content: ""; position: absolute; width: 2.2vw; height: 2.2vw; border: 0.25vw solid rgba(196, 194, 214, 0.5); } .picture__right::before { top: 40%; left: 25%; } .picture__right::after { top: 55%; left: 45%; } .picture__left { background-color: #c4c2d6; } .picture__top { background-color: #eaeaea; } .picture__bottom { background-color: #c4c2d6; } /***************/ /***************/ .door-l { width: 0.25vw; height: 2vw; left: 34vw; bottom: 13.5vw; transform: translateZ(3vw); position: absolute; } .door-l__front { width: 0.25vw; height: 14vw; transform-origin: bottom left; transform: rotateX(-90deg) translateZ(-13vw); } .door-l__back { width: 0.25vw; height: 14vw; transform-origin: top left; transform: rotateX(-90deg) rotateY(180deg) translateX(-0.25vw) translateY(-14vw); } .door-l__right { width: 1vw; height: 14vw; transform-origin: top left; transform: rotateY(90deg) rotateZ(-90deg) translateZ(0.25vw) translateX(-1vw) translateY(-14vw); } .door-l__left { width: 1vw; height: 14vw; transform-origin: top left; transform: rotateY(-90deg) rotateZ(90deg) translateY(-14vw); } .door-l__top { width: 0.25vw; height: 1vw; transform-origin: top left; transform: translateZ(14vw); } .door-l__bottom { width: 0.25vw; height: 1vw; transform-origin: top left; transform: rotateY(180deg) translateX(-0.25vw); } .door-l__front { background-color: #413e5c; } .door-l__back { background-color: #716d9d; } .door-l__right { background-color: #716d9d; } .door-l__left { background-color: #413e5c; } .door-l__top { background-color: #716d9d; } .door-l__bottom { background-color: #716d9d; } .door-r { width: 4vw; height: 2vw; left: 40vw; bottom: 13.5vw; transform: translateZ(3vw); position: absolute; } .door-r__front { width: 4vw; height: 14vw; transform-origin: bottom left; transform: rotateX(-90deg) translateZ(-13vw); } .door-r__back { width: 4vw; height: 14vw; transform-origin: top left; transform: rotateX(-90deg) rotateY(180deg) translateX(-4vw) translateY(-14vw); } .door-r__right { width: 1vw; height: 14vw; transform-origin: top left; transform: rotateY(90deg) rotateZ(-90deg) translateZ(4vw) translateX(-1vw) translateY(-14vw); } .door-r__left { width: 1vw; height: 14vw; transform-origin: top left; transform: rotateY(-90deg) rotateZ(90deg) translateY(-14vw); } .door-r__top { width: 4vw; height: 1vw; transform-origin: top left; transform: translateZ(14vw); } .door-r__bottom { width: 4vw; height: 1vw; transform-origin: top left; transform: rotateY(180deg) translateX(-4vw); } .door-r__front { background-color: #413e5c; } .door-r__back { background-color: #716d9d; } .door-r__right { background-color: #716d9d; } .door-r__left { background-color: #413e5c; } .door-r__top { background-color: #716d9d; } .door-r__bottom { background-color: #716d9d; } .door-b, .door-t { width: 4vw; height: 2vw; left: 32vw; bottom: 13.5vw; transform: translateZ(3vw); position: absolute; } .door-b__front, .door-t__front { width: 12vw; height: 0.25vw; transform-origin: bottom left; transform: rotateX(-90deg) translateZ(0.75vw); } .door-b__back, .door-t__back { width: 12vw; height: 0.25vw; transform-origin: top left; transform: rotateX(-90deg) rotateY(180deg) translateX(-12vw) translateY(-0.25vw); } .door-b__right, .door-t__right { width: 1vw; height: 0.25vw; transform-origin: top left; transform: rotateY(90deg) rotateZ(-90deg) translateZ(12vw) translateX(-1vw) translateY(-0.25vw); } .door-b__left, .door-t__left { width: 1vw; height: 0.25vw; transform-origin: top left; transform: rotateY(-90deg) rotateZ(90deg) translateY(-0.25vw); } .door-b__top, .door-t__top { width: 12vw; height: 1vw; transform-origin: top left; transform: translateZ(0.25vw); } .door-b__bottom, .door-t__bottom { width: 12vw; height: 1vw; transform-origin: top left; transform: rotateY(180deg) translateX(-12vw); } .door-b__front, .door-t__front { background-color: #413e5c; } .door-b__back, .door-t__back { background-color: #716d9d; } .door-b__right, .door-t__right { background-color: #716d9d; } .door-b__left, .door-t__left { background-color: #716d9d; } .door-b__top, .door-t__top { background-color: #716d9d; } .door-b__bottom, .door-t__bottom { background-color: #716d9d; } .door-t { transform: translateZ(16.8vw); }