What if you could step into the world of 3D gaming without writing a single line of JavaScript? Welcome to the fascinating challenge of creating a fully functional 3D maze using only HTML and CSS! With clever use of CSS properties like transforms, perspective, and transitions, we’ll craft an immersive experience where users can navigate through a visually striking maze. This blog will guide you step-by-step through the process of combining structural HTML and advanced CSS techniques to build a lightweight, browser-friendly 3D environment. Ready to push the boundaries of what’s possible with pure CSS? Let’s get started!
I would recommend you don’t just copy and paste the code, just look at the code and type by understanding it.
Demo
See the Pen A Pure CSS 3D Maze! by Ben Evans (@ivorjetski) on CodePen.
HTML Code
Starter Template
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- CSS -->
<link rel="stylesheet" href="style.css">
<title>Coding Torque</title>
</head>
<body>
<!-- Further code here -->
</body>
</html>Paste the below code in your <body> tag.
<div>
<input type="radio" id="ilift1" title="lift1" class="liftmove ilower" name="liftup" />Lift 1
<input type="radio" id="ilift2" title="lift2" class="liftmove iupper" name="liftup" />Lift 2
<input type="radio" id="ilift3" title="lift3" class="liftmove ilower" name="liftup" />Lift 3
<input type="radio" id="ilift4" title="lift4" class="liftmove ilower" name="liftup" />Lift 4
<input type="radio" id="ilift5" title="lift5" class="liftmove iupper" name="liftup" />Lift 5
<input type="radio" id="ilift6" title="lift6" class="liftmove ilower" name="liftup" />Lift 6
<input type="radio" id="ilift7" title="lift7" class="liftmove ilower" name="liftup" />Lift 7
<input type="radio" id="iliftup" title="liftup" class="liftmove ilower d-none" name="liftup" checked />
<br />
<input type="checkbox" id="top-view" />Top view
<input type="checkbox" id="bottom-floor" />Bottom floor
<input type="radio" name="gfx" id="gfx1" class="d-none" />
<input type="radio" name="gfx" id="gfx2" checked class="d-none" />
<input type="radio" name="num" id="numon" checked class="d-none" />
<input type="radio" name="num" id="numoff" class="d-none" />
<input type="radio" id="win" name="x" class="d-none" />
<br />
<input type="radio" id="z-1" name="room" title="z-1" />Z-1
<input type="radio" id="z-2" name="room" title="z-2" checked />Z-2
<input type="radio" id="z-3" name="room" title="z-3" />Z-3
<input type="radio" id="z-4" name="room" title="z-4" />Z-4
<input type="radio" id="z-5" name="room" title="z-5" />Z-5
<input type="radio" id="z-6" name="room" title="z-6" />Z-6
<br />
<input type="radio" id="x-1" name="x" title="x-1" />X-1
<input type="radio" id="x-2" name="x" title="x-2" />X-2
<input type="radio" id="x-3" name="x" title="x-3" checked />X-3
<input type="radio" id="x-4" name="x" title="x-4" />X-4
<input type="radio" id="x-5" name="x" title="x-5" />X-5
<input type="radio" id="x-6" name="x" title="x-6" />X-6
<input type="radio" id="x-7" name="x" title="x-7" />X-7
<input type="radio" id="original" checked name="rotate" class="d-none" />
<br />
<input type="radio" id="left1" name="rotate" class="x-rotation" />L-1
<input type="radio" id="left2" name="rotate" class="z-rotation" />L-2
<input type="radio" id="left3" name="rotate" class="x-rotation" />L-3
<input type="radio" id="left4" name="rotate" class="z-rotation" />L-4
<br />
<input type="radio" id="right1" name="rotate" class="x-rotation" />R-1
<input type="radio" id="right2" name="rotate" class="z-rotation" />R-2
<input type="radio" id="right3" name="rotate" class="x-rotation" />R-3
<input type="radio" id="right4" name="rotate" class="z-rotation" />R-4
<content>
<w>
<x>
<y>
<z>
<darkness>
<u></u> <u></u> <u></u> <u></u> <u></u>
</darkness>
<darkness>
<u></u> <u></u> <u></u> <u></u> <u></u><u></u>
</darkness>
<room>1</room>
<room>2</room>
<room class="lift lower">
<lift id="lift1">
<label for="ilift1"></label>
<floor></floor>
<floor></floor>
</lift>
</room>
<room class="lift upper">
<lift id="lift2">
<label for="ilift2"></label>
<floor></floor>
<floor></floor>
</lift>
</room>
<room>5</room>
<room>6</room>
<room>7</room>
<room>8</room>
<room>9</room>
<room>10</room>
<room>11</room>
<room>12</room>
<room class="lift lower">
<lift id="lift3">
<label for="ilift3"></label>
<floor></floor>
<floor></floor>
</lift>
</room>
<room>14</room>
<room>15</room>
<room>16</room>
<room>17</room>
<room class="lift lower">
<lift id="lift4">
<label for="ilift4"></label>
<floor></floor>
<floor></floor>
</lift>
</room>
<room>19</room>
<room>20</room>
<room>21</room>
<room>22</room>
<room>23</room>
<room>24</room>
<room>25</room>
<room>26</room>
<room class="lift upper">
<lift id="lift5">
<label for="ilift5"></label>
<floor></floor>
<floor></floor>
</lift>
</room>
<room>28</room>
<room>29</room>
<room>30</room>
<room>31</room>
<room class="lift lower">
<lift id="lift6">
<label for="ilift6"></label>
<floor></floor>
<floor></floor>
</lift>
</room>
<room>33</room>
<room class="lift lower">
<lift id="lift7">
<label for="ilift7"></label>
<floor></floor>
<floor></floor>
</lift>
</room>
<room>35</room>
<room>36</room>
<room>37</room>
<room>38</room>
<room>39</room>
<room>40</room>
<room>41</room>
<room>42</room>
</z>
<z>
<room>1</room>
<room>2</room>
<room class="lift"></room>
<room class="lift"></room>
<room>5</room>
<room>6</room>
<room>7</room>
<room>8</room>
<room>9</room>
<room>10</room>
<room>11</room>
<room>12</room>
<room class="lift"></room>
<room>14</room>
<room>15</room>
<room>16</room>
<room>17</room>
<room class="lift"></room>
<room>19</room>
<room>20</room>
<room>21</room>
<room>22</room>
<room>23</room>
<room>24</room>
<room>25</room>
<room>26</room>
<room class="lift"></room>
<room>28</room>
<room>29</room>
<room>30</room>
<room>31</room>
<room class="lift"></room>
<room>33</room>
<room class="lift"></room>
<room>35</room>
<room>36</room>
<room>37</room>
<room>38</room>
<room>39</room>
<room>40</room>
<room>41</room>
<room>42</room>
</z>
</y>
</x>
</w>
<win>
<u><u></u></u>
<u><u></u></u>
<u><u></u></u>
<u><u></u></u>
<u><u></u></u>
<u><u></u></u>
<u><u></u></u>
<u><u></u></u>
<u><u></u></u>
<u><u></u></u>
<u><u></u></u>
<u><u></u></u>
</win>
</content>
<wintext>
<div class="badge">
<div></div>
</div>
<h1>Well Done!</h1>
<h3>You have solved the maze :)</h3>
<h4>Today is a good day.</h4>
<div class="button">
<label id="wintest" for="x-2">Return?</label>
</div>
</wintext>
<buttons>
<!--x-->
<label class="upb bx dead" for="x-0"></label>
<label class="upb bx" for="x-1"></label>
<label class="upb bx" for="x-2"></label>
<label class="upb bx" for="x-3"></label>
<label class="upb bx" for="x-4"></label>
<label class="upb bx" for="x-5"></label>
<label class="upb bx" for="x-6"></label>
<label class="upb bx" for="x-7"></label>
<label class="upb bx dead" for="x-8"></label>
<label class="upb bx" for="win"></label>
<!--z-->
<label class="upb bz dead" for="z-0"></label>
<label class="upb bz" for="z-1"></label>
<label class="upb bz" for="z-2"></label>
<label class="upb bz" for="z-3"></label>
<label class="upb bz" for="z-4"></label>
<label class="upb bz" for="z-5"></label>
<label class="upb bz" for="z-6"></label>
<label class="upb bz dead" for="z-7"></label>
<label class="leftb lb1" for="left1"></label>
<label class="leftb lb2" for="left2"></label>
<label class="leftb lb3" for="left3"></label>
<label class="leftb lb4" for="left4"></label>
<label class="leftb lb5" for="right1"></label>
<label class="leftb lb6" for="right2"></label>
<!--z-->
<label class="downb bz dead" for="z-0"></label>
<label class="downb bz" for="z-1"></label>
<label class="downb bz" for="z-2"></label>
<label class="downb bz" for="z-3"></label>
<label class="downb bz" for="z-4"></label>
<label class="downb bz" for="z-5"></label>
<label class="downb bz" for="z-6"></label>
<label class="downb bz dead" for="z-7"></label>
<!--x-->
<label class="downb bx dead" for="x-0"></label>
<label class="downb bx" for="x-1"></label>
<label class="downb bx" for="x-2"></label>
<label class="downb bx" for="x-3"></label>
<label class="downb bx" for="x-4"></label>
<label class="downb bx" for="x-5"></label>
<label class="downb bx" for="x-6"></label>
<label class="downb bx" for="x-7"></label>
<label class="downb bx dead" for="x-8"></label>
<label class="rightb rb1" for="right1"></label>
<label class="rightb rb2" for="right2"></label>
<label class="rightb rb3" for="right3"></label>
<label class="rightb rb4" for="right4"></label>
<label class="rightb rb5" for="left1"></label>
<label class="rightb rb6" for="left2"></label>
</buttons>
<graphics>
<label for="gfx2">Graphics: Low</label>
<label for="gfx1">Graphics: High</label>
</graphics>
<numbers>
<label for="numon">Help: On</label>
<label for="numoff">Help: Off</label>
</numbers>
<a href="https://tinydesign.co.uk/" title="Ben Evans Portfolio">
<sig><u></u></sig>
</a>
</div>CSS Code
Create a file style.css and paste the code below.
$blk: #1a0606;
$none: rgba(#fff,0);
$key: #BDBBAF;
$white: lighten($key,20);
$floor: #D73A4D;
$red: $floor;
$body: #4B4640;
$kk: rgba($key,.5);
$blk2: lighten($blk,5);
:root {
--white: #e6e0e0;
--floor: #D73A4D;
}
:root:has(#gfx1:checked) {
--white: #574444;
--floor: #69262e;
div:before, darkness {
display: none;
}
}
html {
font-size: clamp(6px, 1vh, 22px);
background: $blk;
}
@media (orientation: portrait) {
html {
font-size: .8vh;
}
}
body {
margin: 0;
text-align: center;
color: $none;
font-size: 2rem;
height: 100vh;
font-family: Arial, Helvetica, sans-serif;
& > div {
overflow: hidden;
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
&:before {
content: '';
top: 0;
left: 0;
position: absolute;
width: 100%;
height: 100%;
pointer-events: none;
z-index: 2;
}
@media (min-width: 480px) {
&:before {
background: radial-gradient($none, rgba($blk,.7));
box-shadow: inset 0 1rem 3rem $blk,inset 0 -1rem 3rem $blk,inset 0 0 5rem $blk;
transform: translate3d(0,0,0);
}
}
}
content *, content *:before, content *:after {
box-sizing: border-box;
position: absolute;
content: '';
left: 0;
top: 0;
transform-style: preserve-3d;
}
}
content, room {
width: 100rem;
height: 100rem;
}
content {
margin: auto;
position: absolute;
perspective: 100rem;
display: block;
inset: 0;
left: -100rem;
right: -100rem;
@media (max-width: 480px) {
transform: scale(.8);
}
}
input {
position: relative;
z-index: 1;
margin-top: 1rem;
display: none;
}
#top-view:checked {
~ content > w {
transform: translate3d(50rem,200rem,-600rem) rotateX(-90deg) !important;
}
}
#bottom-floor:checked {
~ content > w > x > y > z:nth-of-type(1) room {
display: none;
}
}
w, x, y, z {
width: 100%;
height: 100%;
}
w {
transform-origin: 50rem -50rem 0;
transition: all 1s ease-in-out;
animation: enter 1s ease-in-out backwards;
transform: translate3d(0,100rem,0);
@keyframes enter {
0% {
transform: translate3d(50rem,300rem,-800rem) rotateX(-90deg);
}
}
}
y {
transform-origin: -50rem 0;
}
x {
transform-origin: 50rem 0 50rem;
}
z {
transform-origin: 0 0;
}
$starscolour: #fff,lighten($red,20 );
@function stars ($a, $b) {
$value: '#{random(100)}vw #{random(90)}vh '+ $b + ' ' + '#{nth($starscolour, random(length($starscolour)))}';
@for $i from 2 through $a {
$value: '#{$value} , #{random(100)}vw #{random(90)}vh '+ $b + ' ' + '#{nth($starscolour, random(length($starscolour)))}';
}
@return unquote($value);
}
$stars: stars(50, .1rem);
w {
&:before, &:after {
transform: translate3d(-500vw,-600vh, -1000rem) scale(10);
content: '';
width: .3rem;
height: .3rem;
background: #fff;
box-shadow: $stars;
right: 0;
margin: auto;
}
}
graphics, numbers {
bottom: 1rem;
left: 1rem;
position: absolute;
z-index: 2;
label {
padding: .5rem 1rem;
background: $blk;
color: $white;
border-radius: 1rem;
cursor: pointer;
font-size: 1.5rem;
}
}
#gfx2:checked ~ graphics > [for="gfx2"],
#gfx1:checked ~ graphics > [for="gfx1"],
#numon:checked ~ numbers > [for="numon"],
#numoff:checked ~ numbers > [for="numoff"] {
display: none;
}
numbers {
bottom: 1rem;
left: 14rem;
position: absolute;
z-index: 2;
}
:root:has(#numoff:checked) {
body, room {
color: #fff;
}
input {
display: inline;
}
}
.d-none {
display: none !important;
}
//@import "css-sig";
sig {
&, * {
height: 9.25em;
overflow: hidden;
border-radius: .5em;
}
position: absolute;
right: 1rem;
top: 1rem;
font-size: .5rem;
color: $white;
width: 10em;
transform: skewX(10deg) scaleY(.45) rotate(2deg);
mix-blend-mode: difference;
&:before, *:before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 5em;
height: 5em;
background: currentColor;
transform: translate3d(-2.5em,0,0) rotate(-45deg);
box-shadow: -3em 3em 0 0 currentColor;
border-radius: .5em 2em .5em 2em;
}
* {
width: 5em;
transform: translate3d(3.75em,0,0) scaleY(.95);
display: block !important;
&:before {
transform: translate3d(-3em,-2em,0) rotate(-45deg);
box-shadow: -3em 3em 0 0 currentColor, -6em 6em 0 0 currentColor;
border-radius: .5em;
}
}
}
//@import "maze";
room {
transform: translate3d(0,0,0) rotateX(90deg);
transform-origin: 0 0 0;
color: $none;
font-size: 30rem;
background: var(--floor);
&:before, &:after {
width: 100%;
height: 100%;
background: var(--white);
transform-origin: 0 0 0;
}
&:before {
transform: translate3d(0,0,100rem) rotateY(90deg);
}
&:after {
transform: translate3d(100rem,0,0) rotateY(-90deg);
}
}
z:nth-of-type(1) room {
&:nth-of-type(36), //
&:nth-of-type(37), //
&:nth-of-type(39), //
&:nth-of-type(40), //
&:nth-of-type(41), //
&:nth-of-type(42), //
&:nth-of-type(35), //
&:nth-of-type(28) {
&:after {
filter: brightness(.5);
}
}
&:nth-of-type(14), //
&:nth-of-type(6), //
&:nth-of-type(38), //
&:nth-of-type(5), //
&:nth-of-type(12), //
&:nth-of-type(26), //
&:nth-of-type(33) {
&:before {
filter: brightness(.5);
}
}
&:nth-of-type(22), //
&:nth-of-type(8), //
&:nth-of-type(38), //
&:nth-of-type(7), //
&:nth-of-type(21), //
&:nth-of-type(18), //
&:nth-of-type(17) {
&:after {
filter: brightness(.75);
}
}
&:nth-of-type(31), //
&:nth-of-type(14), //
&:nth-of-type(36), //
&:nth-of-type(22), //
&:nth-of-type(8), //
&:nth-of-type(16), //
&:nth-of-type(21), //
&:nth-of-type(35), //
&:nth-of-type(42), //
&:nth-of-type(28), //
&:nth-of-type(4) {
&:before {
filter: brightness(.75);
}
}
&:nth-of-type(1) {
transform: translate3d(-300rem, 0, -400rem) rotateX(90deg) rotateZ(90deg);
}
&:nth-of-type(2) {
transform: translate3d(-200rem, 0, -400rem) rotateX(90deg) rotateZ(90deg);
}
&:nth-of-type(3) {
transform: translate3d(-100rem, 0, -400rem) rotateX(90deg) rotateZ(90deg);
}
&:nth-of-type(4) {
transform: translate3d(-100rem, 0, -400rem) rotateX(90deg);
&:after {
transform: translate3d(0,0,0) rotateY(-90deg) rotateX(-90deg);
}
}
&:nth-of-type(5) {
transform: translate3d(0,0,-400rem) rotateX(90deg);
&:after {
transform: translate3d(0,0,0) rotateY(-90deg) rotateX(-90deg);
}
}
&:nth-of-type(6) {
transform: translate3d(100rem,0,-300rem) rotateX(90deg) rotateZ(-90deg);
}
&:nth-of-type(7) {
transform: translate3d(200rem,0,-400rem) rotateX(90deg);
&:before {
transform: translate3d(0,0,0) rotateY(-90deg) rotateX(-90deg);
}
}
&:nth-of-type(8) {
transform: translate3d(-300rem, 0, -200rem) rotateX(90deg) rotateZ(180deg);
&:before {
transform: translate3d(100rem, -100rem, 100rem) rotateY(90deg) rotateX(0deg);
}
}
&:nth-of-type(9) {
transform: translate3d(-300rem, 0, -300rem) rotateX(90deg);
&:before, &:after {
display: none;
}
}
&:nth-of-type(10) {
transform: translate3d(-200rem, 0, -300rem) rotateX(90deg);
&:before, &:after {
display: none;
}
}
&:nth-of-type(11) {
transform: translate3d(-100rem, 0, -300rem) rotateX(90deg);
&:before, &:after {
display: none;
}
}
&:nth-of-type(12) {
transform: translate3d(0,0,-300rem) rotateX(90deg);
}
&:nth-of-type(13) {
transform: translate3d(100rem, 0, -300rem) rotateX(90deg);
&:before, &:after {
display: none;
}
}
&:nth-of-type(14) {
transform: translate3d(300rem, 0, -300rem) rotateX(90deg) rotateZ(90deg);
&:before {
transform: translate3d(0,0,0) rotateY(-90deg) rotateX(-90deg);
}
}
&:nth-of-type(15) {
transform: translate3d(-400rem, 0, -200rem) rotateX(90deg);
&:before, &:after {
display: none;
}
}
&:nth-of-type(16) {
transform: translate3d(-200rem, 0, -100rem) rotateX(90deg) rotateZ(-180deg);
&:before {
transform: translate3d(0, 100rem, 100rem) rotateY(90deg) rotateX(90deg);
}
}
&:nth-of-type(17) {
transform: translate3d(-200rem,0,-100rem) rotateX(90deg) rotateZ(-90deg);
}
&:nth-of-type(18) {
transform: translate3d(0,0,-100rem) rotateX(90deg) rotateZ(-180deg);
&:after {
transform: translate3d(0,100rem,0) rotateY(-90deg) rotateX(-90deg);
}
&:before {
transform: translate3d(100rem,0,100rem) rotateY(90deg) rotateX(-90deg);
}
}
&:nth-of-type(19) {
transform: translate3d(0,0,-200rem) rotateX(90deg);
&:before {
display: none;
}
}
&:nth-of-type(20) {
transform: translate3d(100rem,0,-200rem) rotateX(90deg);
&:before, &:after {
display: none;
}
}
&:nth-of-type(21) {
transform: translate3d(200rem, 0, -200rem) rotateX(90deg);
&:after {
transform: translate3d(-100rem,100rem,0) rotateY(-90deg) rotateX(-90deg);
}
&:before {
transform: translate3d(100rem,0,100rem) rotateY(90deg);
}
}
&:nth-of-type(22) {
transform: translate3d(-300rem, 0, 0) rotateX(90deg) rotateZ(180deg);
&:before {
transform: translate3d(100rem, -100rem, 100rem) rotateY(90deg) rotateX(0deg);
}
}
&:nth-of-type(23) {
transform: translate3d(-200rem, 0, 0) rotateX(90deg) rotateZ(-180deg);
&:before {
display: none;
}
}
&:nth-of-type(24) {
transform: translate3d(-200rem, 0, -100rem) rotateX(90deg);
&:before, &:after {
display: none;
}
}
&:nth-of-type(25) {
transform: translate3d(-100rem, 0, -100rem) rotateX(90deg);
&:before, &:after {
display: none;
}
}
&:nth-of-type(26) {
transform: translate3d(0,0,-100rem) rotateX(90deg);
}
&:nth-of-type(27) {
transform: translate3d(100rem,0,-100rem) rotateX(90deg);
&:before, &:after {
display: none;
}
}
&:nth-of-type(28) {
transform: translate3d(300rem, 0, 0rem) rotateX(90deg) rotateZ(180deg);
}
&:nth-of-type(29) {
transform: translate3d(-400rem,0,0) rotateX(90deg);
&:before, &:after {
display: none;
}
}
&:nth-of-type(30) {
transform: translate3d(-200rem, 0, 100rem) rotateX(90deg) rotateZ(-180deg);
&:before {
display: none;
}
}
&:nth-of-type(31) {
transform: translate3d(-200rem, 0, 0rem) rotateX(90deg) rotateZ(0deg);
&:after {
transform: translate3d(0,0,0) rotateY(-90deg) rotateX(-90deg);
}
}
&:nth-of-type(32) {
transform: translate3d(0,0,0) rotateX(90deg) rotateZ(90deg);
&:before, &:after {
display: none;
}
}
&:nth-of-type(34) {
transform: translate3d(100rem,0,0) rotateX(90deg);
&:before, &:after {
display: none;
}
}
&:nth-of-type(35) {
transform: translate3d(300rem, 0, 100rem) rotateX(90deg) rotateZ(180deg);
}
&:nth-of-type(36) {
transform: translate3d(-300rem, 0, 100rem) rotateX(90deg) rotateZ(90deg);
&:before {
transform: translate3d(0, 100rem, 100rem) rotateY(90deg) rotateX(90deg);
}
}
&:nth-of-type(37) {
transform: translate3d(-200rem, 0, 100rem) rotateX(90deg) rotateZ(90deg);
&:before {
display: none;
}
}
&:nth-of-type(38) {
transform: translate3d(-200rem, 0, 200rem) rotateX(90deg) rotateZ(-90deg);
&:after {
transform: translate3d(0,0,0) rotateY(-90deg) rotateX(-90deg);
}
}
&:nth-of-type(39) {
transform: translate3d(0,0,100rem) rotateX(90deg) rotateZ(90deg);
}
&:nth-of-type(40) {
transform: translate3d(100rem,0,200rem) rotateX(90deg) rotateZ(180deg);
&:after {
transform: translate3d(0,0,0) rotateY(-90deg) rotateX(-90deg);
}
}
&:nth-of-type(41) {
transform: translate3d(200rem, 0, 200rem) rotateX(90deg) rotateZ(180deg);
&:after {
transform: translate3d(0,0,0) rotateY(-90deg) rotateX(-90deg);
}
&:before {
display: none;
}
}
&:nth-of-type(42) {
transform: translate3d(300rem, 0, 200rem) rotateX(90deg) rotateZ(180deg);
&:after {
transform: translate3d(0,0,0) rotateY(-90deg) rotateX(-90deg);
}
}
}
z:nth-of-type(2) room {
transform: translate3d(0,100rem,0) rotateX(90deg);
&:nth-of-type(36), //
&:nth-of-type(37), //
&:nth-of-type(39), //
&:nth-of-type(40), //
&:nth-of-type(41), //
&:nth-of-type(42), //
&:nth-of-type(38), //
&:nth-of-type(2), //
&:nth-of-type(3) {
&:after {
filter: brightness(.5);
}
}
&:nth-of-type(14), //
&:nth-of-type(6), //
&:nth-of-type(38), //
&:nth-of-type(5), //
&:nth-of-type(12), //
&:nth-of-type(26), //
&:nth-of-type(33), //
&:nth-of-type(11), //
&:nth-of-type(16), //
&:nth-of-type(24), //
&:nth-of-type(25), //
&:nth-of-type(27) {
&:before {
filter: brightness(.5);
}
}
&:nth-of-type(1), //
&:nth-of-type(4), //
&:nth-of-type(10), //
&:nth-of-type(14), //
&:nth-of-type(22), //
&:nth-of-type(8), //
&:nth-of-type(7), //
&:nth-of-type(21), //
&:nth-of-type(17), //
&:nth-of-type(27) {
&:after {
filter: brightness(.75);
}
}
&:nth-of-type(15), //
&:nth-of-type(14), //
&:nth-of-type(36), //
&:nth-of-type(22), //
&:nth-of-type(21), //
&:nth-of-type(35), //
&:nth-of-type(42), //
&:nth-of-type(28), //
&:nth-of-type(37), //
&:nth-of-type(38), //
&:nth-of-type(39) {
&:before {
filter: brightness(.75);
}
}
&:nth-of-type(1) {
transform: translate3d(-300rem, 100rem, -400rem) rotateX(90deg) rotateZ(90deg);
&:after {
transform: translate3d(100rem,100rem,0) rotateY(-90deg) rotateX(90deg);
}
}
&:nth-of-type(2) {
transform: translate3d(-200rem, 100rem, -400rem) rotateX(90deg) rotateZ(90deg);
}
&:nth-of-type(3) {
transform: translate3d(-100rem, 100rem, -400rem) rotateX(90deg) rotateZ(90deg);
}
&:nth-of-type(4) {
transform: translate3d(0, 100rem, -400rem) rotateX(90deg) rotateZ(90deg);
&:after {
transform: translate3d(0,100rem,0) rotateY(-90deg) rotateX(-90deg);
}
}
&:nth-of-type(5) {
transform: translate3d(0,100rem,-300rem) rotateX(90deg) rotateZ(-90deg);
}
&:nth-of-type(6) {
transform: translate3d(100rem,100rem,-300rem) rotateX(90deg) rotateZ(-90deg);
}
&:nth-of-type(7) {
transform: translate3d(200rem,100rem,-400rem) rotateX(90deg);
&:before {
transform: translate3d(0,0,0) rotateY(-90deg) rotateX(-90deg);
}
}
&:nth-of-type(8) {
transform: translate3d(-300rem, 100rem, -200rem) rotateX(90deg) rotateZ(180deg);
&:before {
transform: translate3d(0, 0, 100rem) rotateY(90deg) rotateX(90deg);
}
}
&:nth-of-type(9) {
transform: translate3d(-300rem, 100rem, -300rem) rotateX(90deg);
&:before, &:after {
display: none;
}
}
&:nth-of-type(10) {
transform: translate3d(-200rem, 100rem, -300rem) rotateX(90deg);
&:before, &:after {
display: none;
}
}
&:nth-of-type(11) {
transform: translate3d(0, 100rem, -300rem) rotateX(90deg) rotateZ(90deg);
&:after {
transform: translate3d(0,0,0) rotateY(-90deg) rotateX(-90deg);
}
}
&:nth-of-type(12) {
transform: translate3d(100rem,100rem,-300rem) rotateX(90deg) rotateZ(90deg);
&:after {
display: none;
}
}
&:nth-of-type(13) {
transform: translate3d(200rem, 100rem, -300rem) rotateX(90deg) rotateZ(90deg);
&:before {
transform: translate3d(0,0,0) rotateY(-90deg) rotateX(-90deg);
}
}
&:nth-of-type(14) {
transform: translate3d(200rem, 100rem, -300rem) rotateX(90deg);
}
&:nth-of-type(15) {
transform: translate3d(-400rem, 100rem, -200rem) rotateX(90deg);
&:after {
display: none;
}
}
&:nth-of-type(16) {
transform: translate3d(-300rem, 100rem, -100rem) rotateX(90deg) rotateZ(-90deg);
}
&:nth-of-type(17) {
transform: translate3d(-200rem,100rem,-100rem) rotateX(90deg) rotateZ(-90deg);
&:after {
transform: translate3d(0, 100rem, 100rem) rotateY(90deg) rotateX(90deg);
}
}
&:nth-of-type(18) {
transform: translate3d(-100rem,100rem,-100rem) rotateX(90deg) rotateZ(-90deg);
&:after {
transform: translate3d(0, 100rem, 100rem) rotateY(90deg) rotateX(90deg);
}
}
&:nth-of-type(19) {
transform: translate3d(100rem,100rem,-200rem) rotateX(90deg) rotateZ(90deg);
&:before {
display: none;
}
}
&:nth-of-type(20) {
transform: translate3d(200rem,100rem,-200rem) rotateX(90deg) rotateZ(90deg);
}
&:nth-of-type(21) {
transform: translate3d(200rem, 100rem, -200rem) rotateX(90deg);
&:before {
display: none;
}
}
&:nth-of-type(22) {
transform: translate3d(-300rem, 100rem, 0) rotateX(90deg) rotateZ(180deg);
&:before {
transform: translate3d(100rem, -100rem, 100rem) rotateY(90deg) rotateX(0deg);
}
}
&:nth-of-type(23) {
transform: translate3d(-200rem, 100rem, 0) rotateX(90deg) rotateZ(-180deg);
&:before {
display: none;
}
}
&:nth-of-type(24) {
transform: translate3d(-100rem, 100rem, -100rem) rotateX(90deg) rotateZ(90deg);
}
&:nth-of-type(25) {
transform: translate3d(0, 100rem, -100rem) rotateX(90deg) rotateZ(90deg);
}
&:nth-of-type(26) {
transform: translate3d(100rem,100rem,-100rem) rotateX(90deg) rotateZ(90deg);
&:after {
display: none;
}
}
&:nth-of-type(27) {
transform: translate3d(200rem,100rem,-100rem) rotateX(90deg) rotateZ(90deg);
}
&:nth-of-type(28) {
transform: translate3d(300rem, 100rem, 0rem) rotateX(90deg) rotateZ(180deg);
}
&:nth-of-type(29) {
transform: translate3d(-400rem,100rem,0) rotateX(90deg);
&:before, &:after {
display: none;
}
}
&:nth-of-type(30) {
transform: translate3d(-200rem, 100rem, 100rem) rotateX(90deg) rotateZ(-180deg);
&:before {
display: none;
}
}
&:nth-of-type(31) {
transform: translate3d(-100rem, 100rem, 0rem) rotateX(90deg) rotateZ(90deg);
}
&:nth-of-type(32) {
transform: translate3d(-100rem,100rem,0) rotateX(90deg);
&:before, &:after {
display: none;
}
}
&:nth-of-type(34) {
transform: translate3d(100rem,100rem,0) rotateX(90deg);
&:before, &:after {
display: none;
}
}
&:nth-of-type(35) {
transform: translate3d(300rem, 100rem, 100rem) rotateX(90deg) rotateZ(180deg);
}
&:nth-of-type(36) {
transform: translate3d(-300rem, 100rem, 100rem) rotateX(90deg) rotateZ(90deg);
&:before {
transform: translate3d(0, 100rem, 100rem) rotateY(90deg) rotateX(90deg);
}
}
&:nth-of-type(37) {
transform: translate3d(-200rem, 100rem, 100rem) rotateX(90deg) rotateZ(90deg);
}
&:nth-of-type(38) {
transform: translate3d(-100rem, 100rem, 100rem) rotateX(90deg) rotateZ(90deg);
}
&:nth-of-type(39) {
transform: translate3d(0,100rem,100rem) rotateX(90deg) rotateZ(90deg);
}
&:nth-of-type(40) {
transform: translate3d(100rem,100rem,200rem) rotateX(90deg) rotateZ(180deg);
&:after {
transform: translate3d(0,0,0) rotateY(-90deg) rotateX(-90deg);
}
}
&:nth-of-type(41) {
transform: translate3d(200rem, 100rem, 200rem) rotateX(90deg) rotateZ(180deg);
&:after {
transform: translate3d(0,0,0) rotateY(-90deg) rotateX(-90deg);
}
&:before {
display: none;
}
}
&:nth-of-type(42) {
transform: translate3d(300rem, 100rem, 200rem) rotateX(90deg) rotateZ(180deg);
&:after {
transform: translate3d(0,0,0) rotateY(-90deg) rotateX(-90deg);
}
}
}
//@import "buttons";
buttons {
position: absolute;
bottom: 0;
right: 0;
transform: translate3d(0,0,0);
width: 40rem;
height: 30rem;
z-index: 2;
label {
font-size: 3rem;
border-radius: 1rem;
padding: 1em;
color: $white;
cursor: pointer;
font-weight: bold;
width: 3em;
height: 3em;
transition: all .15s ease-in-out;
position: absolute;
box-sizing: border-box;
background: $body;
border: .2rem solid $blk;
&.leftb {
bottom: 1rem;
right: 21rem;
}
&.rightb {
bottom: 1rem;
right: 1rem;
}
&.upb {
bottom: 11rem;
right: 11rem;
}
&.downb {
bottom: 1rem;
right: 11rem;
}
&:before, &:after {
content: '';
width: 100%;
height: 100%;
position: absolute;
border-radius: 1rem;
left: 0;
right: 0;
top: 0;
}
&:after {
content: '\2191';
font-size: 4rem;
}
&.leftb:after {
content: '\2190';
}
&.rightb:after {
content: '\2192';
}
&.downb:after {
content: '\2193';
}
&:hover, &:focus, &:active {
transform: translate3d(0,.5rem,-10rem) scale(.98);
color: $blk;
}
}
}
@supports not (-webkit-touch-callout: none) {
#gfx2:checked ~ {
@media (min-width: 480px) {
buttons {
label {
text-shadow: 0 0 .2rem currentColor, 0 0 .2rem currentColor, 0 0 .2rem currentColor, 0 0 .2rem currentColor;
border: none;
color: $body;
&:before {
transform: translate3d(0, 0, -.6rem);
background: linear-gradient($kk, rgba($body,.5)), //
linear-gradient(90deg, lighten($kk,10), rgba($body,.5)), //
conic-gradient(from 20deg, currentColor, $kk, currentColor, currentColor, currentColor, $kk, currentColor,currentColor,currentColor, $kk, currentColor,currentColor,currentColor, $kk, currentColor, currentColor,currentColor), $key;
box-shadow: .5rem .5rem 1rem $blk;
}
&:after {
transform: translate3d( 0, -.5rem, -.3rem) scale(.75);
background: radial-gradient( rgba($body,.5), $key), $key;
box-shadow: inset 0 0 .5rem lighten($kk,10), 0 0 .5rem lighten($kk,10);
}
}
}
}
}
}
.dead {
filter: brightness(.8);
}
//@import "movement";
x, y, z, room {
transition: all 1s ease-in-out;
}
.upb, .downb, .rightb, .leftb, .dead {
display: none;
}
#original:checked {
~ buttons > {
.rb1, .lb1 {
display: block;
}
}
}
// <- left
#left1:checked {
~ content > w > x {
transform: rotateY(-90deg);
}
~ buttons > {
.rb4, .lb2 {
display: block;
}
}
}
// <- backwards
#left2:checked {
~ content > w > x {
transform: rotateY(-180deg);
}
~ buttons > {
.rb5, .lb3 {
display: block;
}
}
}
// <-- right
#left3:checked {
~ content > w > x {
transform: rotateY(-270deg);
}
~ buttons > {
.rb6, .lb4 {
display: block;
}
}
}
// <- start
#left4:checked {
~ content > w > x {
animation: killrotate 1s ease-in-out;
@keyframes killrotate {
0% {
transform: rotateY(-270deg);
}
99% {
transform: rotateY(-360deg);
}
100% {
transform: rotateY(0deg);
}
}
}
~ buttons > {
.rb1, .lb1 {
display: block;
}
}
}
// -> right
#right1:checked {
~ content > w > x {
transform: rotateY(90deg);
}
~ buttons > {
.rb2, .lb4 {
display: block;
}
}
}
// -> backwards
#right2:checked {
~ content > w > x {
transform: rotateY(180deg);
}
~ buttons > {
.rb3, .lb5 {
display: block;
}
}
}
// -> left
#right3:checked {
~ content > w > x {
transform: rotateY(270deg);
}
~ buttons > {
.rb4, .lb6 {
display: block;
}
}
}
// -> start
#right4:checked {
~ content > w > x {
animation: killrotate2 1s ease-in-out;
@keyframes killrotate2 {
0% {
transform: rotateY(270deg);
}
99% {
transform: rotateY(360deg);
}
100% {
transform: rotateY(0deg);
}
}
}
~ buttons > {
.rb1, .lb1 {
display: block;
}
}
}
// swap them
#left2:checked, #left3:checked, #right1:checked, #right2:checked {
~ buttons > {
.upb {
bottom: 1rem;
&:after {
content: '\2193';
}
}
.downb {
bottom: 11rem;
&:after {
content: '\2191';
}
}
}
}
// z loop
@for $i from 0 through 7 {
#z-#{$i}:checked {
~ content > w > x > y > z {
transform: translate3d(0,0,(($i - 2 ) * 100rem));
}
~ buttons > {
.upb[for="z-#{$i + 1}"], .downb[for="z-#{$i - 1}"] {
display: block;
}
}
}
}
// x loop
@for $i from 0 through 9 {
#x-#{$i}:checked {
~ content > w > x > y {
transform: translate3d((($i - 3) * 100rem),0,0);
}
~ buttons > {
.upb[for="x-#{$i + 1}"], .downb[for="x-#{$i - 1}"] {
display: block;
}
}
}
}
#left2, #left4, #original, #right2, #right4 {
&:checked ~ buttons > {
.bx {
display: none !important;
}
}
}
#left1, #left3, #right1, #right3 {
&:checked ~ buttons > {
.bz {
display: none !important;
}
}
}
//@import "movement-blockers";
body:has(.ilower:checked) {
#z-2:checked ~ #x-3:checked ~ .x-rotation:checked,
#z-3:checked ~ #x-3:checked ~ .x-rotation:checked,
#z-5:checked ~ #x-3:checked ~ .x-rotation:checked,
#z-2:checked ~ #x-6:checked ~ .x-rotation:checked,
#z-2:checked ~ #x-2:checked ~ .x-rotation:checked,
#z-3:checked ~ #x-2:checked ~ .x-rotation:checked,
#z-6:checked ~ #x-4:checked ~ .x-rotation:checked {
~ buttons > {
.upb, .downb {
display: none;
}
.upb[for="x-8"], .downb[for="x-8"] {
display: block;
}
}
}
//just down blocked x
#z-4:checked ~ #x-3:checked ~ .x-rotation:checked,
#z-1:checked ~ #x-3:checked ~ .x-rotation:checked,
#z-2:checked ~ #x-4:checked ~ .x-rotation:checked,
#z-3:checked ~ #x-4:checked ~ .x-rotation:checked,
#z-1:checked ~ #x-6:checked ~ .x-rotation:checked,
#z-2:checked ~ #x-7:checked ~ .x-rotation:checked,
#z-3:checked ~ #x-7:checked ~ .x-rotation:checked,
#z-4:checked ~ #x-7:checked ~ .x-rotation:checked,
#z-5:checked ~ #x-4:checked ~ .x-rotation:checked,
#z-6:checked ~ #x-1:checked ~ .x-rotation:checked {
~ buttons > {
.downb {
display: none;
}
.downb[for="x-8"] {
display: block;
}
}
}
// just up blocked x
#z-6:checked ~ #x-3:checked ~ .x-rotation:checked,
#z-1:checked ~ #x-2:checked ~ .x-rotation:checked,
#z-1:checked ~ #x-5:checked ~ .x-rotation:checked,
#z-2:checked ~ #x-5:checked ~ .x-rotation:checked,
#z-3:checked ~ #x-6:checked ~ .x-rotation:checked,
#z-4:checked ~ #x-6:checked ~ .x-rotation:checked,
#z-5:checked ~ #x-2:checked ~ .x-rotation:checked,
#z-4:checked ~ #x-2:checked ~ .x-rotation:checked {
~ buttons > {
.upb {
display: none;
}
.upb[for="x-8"] {
display: block;
}
}
}
// walls z
// walls z
// walls z
//up and down blocked z
#z-1:checked ~ #x-4:checked ~ .z-rotation:checked,
#z-3:checked ~ #x-5:checked ~ .z-rotation:checked,
#z-4:checked ~ #x-4:checked ~ .z-rotation:checked,
#z-4:checked ~ #x-5:checked ~ .z-rotation:checked,
#z-5:checked ~ #x-6:checked ~ .z-rotation:checked,
#z-5:checked ~ #x-5:checked ~ .z-rotation:checked,
#z-6:checked ~ #x-2:checked ~ .z-rotation:checked {
~ buttons > {
.upb, .downb {
display: none;
}
.upb[for="z-7"], .downb[for="z-7"] {
display: block;
}
}
}
//up blocked z
#z-2:checked ~ #x-5:checked ~ .z-rotation:checked,
#z-3:checked ~ #x-4:checked ~ .z-rotation:checked,
#z-3:checked ~ #x-2:checked ~ .z-rotation:checked,
#z-4:checked ~ #x-6:checked ~ .z-rotation:checked,
#z-5:checked ~ #x-7:checked ~ .z-rotation:checked,
#z-5:checked ~ #x-2:checked ~ .z-rotation:checked {
~ buttons > {
.upb {
display: none;
}
.upb[for="z-7"] {
display: block;
}
}
}
//down blocked z
#z-2:checked ~ #x-4:checked ~ .z-rotation:checked,
#z-5:checked ~ #x-4:checked ~ .z-rotation:checked,
#z-5:checked ~ #x-1:checked ~ .z-rotation:checked,
#z-4:checked ~ #x-2:checked ~ .z-rotation:checked {
~ buttons > {
.downb {
display: none;
}
.downb[for="z-7"] {
display: block;
}
}
}
}
body:has(.iupper:checked) {
/* background: blue;*/
/// walls x
/// walls x
/// walls x
// up and down blocked x
// z5 x4 needs fixing
#z-5:checked ~ #x-1:checked ~ .x-rotation:checked,
#z-3:checked ~ #x-1:checked ~ .x-rotation:checked,
#z-2:checked ~ #x-1:checked ~ .x-rotation:checked,
#z-2:checked ~ #x-2:checked ~ .x-rotation:checked,
#z-4:checked ~ #x-4:checked ~ .x-rotation:checked,
#z-2:checked ~ #x-3:checked ~ .x-rotation:checked {
~ buttons > {
.upb, .downb {
display: none;
}
.upb[for="x-8"], .downb[for="x-8"] {
display: block;
}
}
}
//just down blocked x
#z-1:checked ~ #x-3:checked ~ .x-rotation:checked,
#z-2:checked ~ #x-4:checked ~ .x-rotation:checked,
#z-2:checked ~ #x-7:checked ~ .x-rotation:checked,
#z-3:checked ~ #x-7:checked ~ .x-rotation:checked,
#z-6:checked ~ #x-5:checked ~ .x-rotation:checked,
#z-3:checked ~ #x-2:checked ~ .x-rotation:checked,
#z-5:checked ~ #x-2:checked ~ .x-rotation:checked,
#z-5:checked ~ #x-4:checked ~ .x-rotation:checked,
#z-4:checked ~ #x-5:checked ~ .x-rotation:checked,
#z-6:checked ~ #x-1:checked ~ .x-rotation:checked {
~ buttons > {
.downb {
display: none;
}
.downb[for="x-8"] {
display: block;
}
}
}
// just up blocked x
#z-5:checked ~ #x-3:checked ~ .x-rotation:checked,
#z-4:checked ~ #x-3:checked ~ .x-rotation:checked,
#z-4:checked ~ #x-7:checked ~ .x-rotation:checked,
#z-1:checked ~ #x-2:checked ~ .x-rotation:checked,
#z-3:checked ~ #x-6:checked ~ .x-rotation:checked,
#z-6:checked ~ #x-4:checked ~ .x-rotation:checked,
#z-6:checked ~ #x-7:checked ~ .x-rotation:checked,
#z-2:checked ~ #x-6:checked ~ .x-rotation:checked {
~ buttons > {
.upb {
display: none;
}
.upb[for="x-8"] {
display: block;
}
}
}
// walls z
// walls z
// walls z
//up and down blocked z
#z-1:checked ~ #x-4:checked ~ .z-rotation:checked,
#z-1:checked ~ #x-5:checked ~ .z-rotation:checked,
#z-2:checked ~ #x-4:checked ~ .z-rotation:checked,
#z-3:checked ~ #x-2:checked ~ .z-rotation:checked,
#z-3:checked ~ #x-5:checked ~ .z-rotation:checked,
#z-5:checked ~ #x-6:checked ~ .z-rotation:checked,
#z-2:checked ~ #x-5:checked ~ .z-rotation:checked,
#z-5:checked ~ #x-2:checked ~ .z-rotation:checked,
#z-1:checked ~ #x-6:checked ~ .z-rotation:checked,
#z-4:checked ~ #x-2:checked ~ .z-rotation:checked,
#z-6:checked ~ #x-6:checked ~ .z-rotation:checked,
#z-6:checked ~ #x-5:checked ~ .z-rotation:checked,
#z-6:checked ~ #x-2:checked ~ .z-rotation:checked,
#z-4:checked ~ #x-6:checked ~ .z-rotation:checked,
#z-6:checked ~ #x-3:checked ~ .z-rotation:checked,
#z-6:checked ~ #x-4:checked ~ .z-rotation:checked,
#z-3:checked ~ #x-4:checked ~ .z-rotation:checked {
~ buttons > {
.upb, .downb {
display: none;
}
.upb[for="z-7"], .downb[for="z-7"] {
display: block;
}
}
}
//up blocked z
#z-3:checked ~ #x-3:checked ~ .z-rotation:checked,
#z-2:checked ~ #x-2:checked ~ .z-rotation:checked,
#z-3:checked ~ #x-6:checked ~ .z-rotation:checked,
#z-4:checked ~ #x-7:checked ~ .z-rotation:checked,
#z-5:checked ~ #x-3:checked ~ .z-rotation:checked,
#z-5:checked ~ #x-5:checked ~ .z-rotation:checked,
#z-6:checked ~ #x-7:checked ~ .z-rotation:checked,
#z-5:checked ~ #x-4:checked ~ .z-rotation:checked {
~ buttons > {
.upb {
display: none;
}
.upb[for="z-7"] {
display: block;
}
}
}
//down blocked z
#z-2:checked ~ #x-6:checked ~ .z-rotation:checked,
#z-4:checked ~ #x-3:checked ~ .z-rotation:checked,
#z-4:checked ~ #x-5:checked ~ .z-rotation:checked,
#z-4:checked ~ #x-4:checked ~ .z-rotation:checked,
#z-5:checked ~ #x-7:checked ~ .z-rotation:checked {
~ buttons > {
.downb {
display: none;
}
.downb[for="z-7"] {
display: block;
}
}
}
}
#ilift7:checked ~ #z-2:checked ~ #x-2:checked ~ .z-rotation:checked {
~ buttons > {
.upb {
display: none;
}
.upb[for="z-7"] {
display: block;
}
}
}
//@import "lifts";
.lift {
background: none;
*, *:before, *:after {
transform-origin: 0 0 0;
}
lift, floor {
width: 100%;
height: 100%;
}
lift {
transform: translate3d(0,0,0);
transition: all 1s ease-in-out;
&:before {
width: 100%;
height: 100%;
background: var(--white);
transform-origin: 0 0 0;
transform: translate3d(0,0,100rem) rotateY(90deg) rotateX(90deg);
filter: brightness(.75);
}
}
&.lower lift {
transform: translate3d(0,0,-100rem);
}
label {
background: darken($red,20);
height: 5rem;
width: 5rem;
cursor: pointer;
transform: translate3d(47.5rem,1.25rem, 25rem) rotateX(90deg);
border-radius: 50%;
transition: all 1s ease-in-out;
pointer-events: none;
&:before, &:after {
height: 5rem;
width: 5rem;
transform: translate3d(0, 0, .25rem);
border-radius: 50%;
background: darken($red,10);
}
&:after {
transform: translate3d(0, 0, .5rem);
}
&:hover, &:focus {
transform: translate3d(47.5rem,.9rem, 25rem) rotateX(90deg);
}
}
@keyframes light {
90% {
background: lighten($red,10);
box-shadow: inset 0 0 3rem $red, 0 0 5rem $red, 0 0 2rem $red;
}
100% {
background: lighten($red,10);
box-shadow: inset 0 0 1rem $blk,inset 0 0 3rem $red, 0 0 2rem $red;
}
}
floor {
background: var(--floor);
&:before, &:after {
width: 10rem;
transform: translate3d( 45rem, .5rem, 0) rotateX(90deg);
background: $body;
height: 33rem;
border-radius: 0 0 5rem 5rem;
}
&:before {
transform: translate3d( 45rem, .1rem, 0) rotateX(90deg);
background: $blk;
}
&:nth-of-type(1) {
border-radius: 1rem;
background: darken($body,10);
}
&:nth-of-type(2) {
transform: translate3d(0,0,100rem);
&:before, &:after {
display: none;
}
}
}
}
body:has(#gfx2:checked) {
@media (min-width: 480px) {
.lift {
label {
box-shadow: inset 0 0 1rem $blk;
&:hover, &:focus {
box-shadow: inset 0 0 3rem $blk;
}
}
}
floor {
&:nth-of-type(1) {
box-shadow: inset 0 0 0 2rem $body, inset -1rem -1rem 0 3rem darken($floor,10), inset 1rem 1rem 0 3rem lighten($floor,10);
background: repeating-linear-gradient(to right, $body, $body 1rem, $none 1rem, $none 2.6rem);
}
}
}
}
//upper level
#ilift5:checked ~ content > w {
transform: translate3d(0,-10rem,0);
> x > y > z > room > #lift5 {
transform: translate3d(0,0,-100rem);
}
}
#ilift2:checked ~ content > w {
transform: translate3d(0,-10rem,0);
> x > y > z > room > #lift2 {
transform: translate3d(0,0,-100rem);
}
}
//lower level
#ilift1:checked ~ content > w {
transform: translate3d(0,100rem,0);
> x > y > z > room > #lift1 {
transform: translate3d(0,0,0);
}
}
#ilift3:checked ~ content > w {
transform: translate3d(0,100rem,0);
> x > y > z > room > #lift3 {
transform: translate3d(0,0,0);
}
}
#ilift4:checked ~ content > w {
transform: translate3d(0,100rem,0);
> x > y > z > room > #lift4 {
transform: translate3d(0,0,0);
}
}
#ilift6:checked ~ content > w {
transform: translate3d(0,100rem,0);
> x > y > z > room > #lift6 {
transform: translate3d(0,0,0);
}
}
#ilift7:checked ~ content > w {
transform: translate3d(0,100rem,0);
> x > y > z > room > #lift7 {
transform: translate3d(0,0,0);
}
}
#z-6:checked ~ #x-5:checked ~ content > w > x > y > z > room:nth-of-type(3) > lift >,
#z-6:checked ~ #x-4:checked ~ content > w > x > y > z > room:nth-of-type(4) > lift >,
#z-5:checked ~ #x-2:checked ~ content > w > x > y > z > room:nth-of-type(13) > lift >,
#z-4:checked ~ #x-4:checked ~ content > w > x > y > z > room:nth-of-type(18) > lift >,
#z-3:checked ~ #x-3:checked ~ content > w > x > y > z > room:nth-of-type(26) > lift >,
#z-3:checked ~ #x-2:checked ~ content > w > x > y > z > room:nth-of-type(27) > lift >,
#z-2:checked ~ #x-4:checked ~ content > w > x > y > z > room:nth-of-type(32) > lift >,
#z-2:checked ~ #x-2:checked ~ content > w > x > y > z > room:nth-of-type(34) > lift > {
label {
pointer-events: all;
animation: light 1s cubic-bezier(0.5, 0, 1, 0.5) forwards;
}
}
.iupper:checked ~ #z-3:checked ~ #x-2:checked ~ content > w > x > y > z > room:nth-of-type(27) > lift >,
.iupper:checked ~ #z-6:checked ~ #x-4:checked ~ content > w > x > y > z > room:nth-of-type(4) > lift >,
.ilower:checked ~ #z-2:checked ~ #x-4:checked ~ content > w > x > y > z > room:nth-of-type(32) > lift >,
.ilower:checked ~ #z-6:checked ~ #x-5:checked ~ content > w > x > y > z > room:nth-of-type(3) > lift >,
.ilower:checked ~ #z-5:checked ~ #x-2:checked ~ content > w > x > y > z > room:nth-of-type(13) > lift >,
.ilower:checked ~ #z-4:checked ~ #x-4:checked ~ content > w > x > y > z > room:nth-of-type(18) > lift >,
.ilower:checked ~ #z-3:checked ~ #x-3:checked ~ content > w > x > y > z > room:nth-of-type(26) > lift >,
.ilower:checked ~ #z-2:checked ~ #x-2:checked ~ content > w > x > y > z > room:nth-of-type(34) > lift > {
label {
animation: light2 1s ease-in-out forwards;
}
}
@keyframes light2 {
0%, 80% {
background: lighten($red,10);
box-shadow: inset 0 0 3rem $red, 0 0 5rem $red, 0 0 2rem $red;
}
100% {
background: darken($red,20);
box-shadow: inset 0 0 1rem $blk;
pointer-events: none;
}
}
//@import "win";
wintext {
transform: scale(0);
position: absolute;
top: 10rem;
left: 0;
right: 0;
margin: auto;
width: 100%;
max-width: 80rem;
font-size: 4rem;
text-align: center;
line-height: 1.5em;
background: $white;
color: $blk;
padding: 1rem;
border-radius: 2rem;
border: 1rem solid $red;
box-shadow: inset 0 0 0 .25rem $blk,inset 0 .25rem .5rem $blk;
background: repeating-radial-gradient(circle at 50% 30%, darken($white,1), darken($white,1) 1rem, $white 1rem, $white 2rem);
h4 {
margin-top: -1rem;
}
h1, h3, h4 {
font-weight: normal;
}
label {
display: inline-block;
font-size: 3rem;
border-radius: 1rem;
padding: 1em 2rem;
color: $body;
cursor: pointer;
font-weight: bold;
transition: all .15s ease-in-out;
position: relative;
margin-bottom: .5rem;
&:before, &:after {
content: '';
width: 100%;
height: 100%;
position: absolute;
border-radius: 1rem;
left: 0;
right: 0;
top: 0;
transition: all .15s ease-in-out;
}
&:before {
background: linear-gradient($kk, rgba($body,.5)), //
linear-gradient(90deg, lighten($kk,20), rgba($body,.5)), //
conic-gradient(from 20deg, currentColor, $kk, currentColor, currentColor, currentColor, $kk, currentColor,currentColor,currentColor, $kk, currentColor,currentColor,currentColor, $kk, currentColor, currentColor,currentColor), $key;
transform: translate3d(0, 0, -.2rem);
box-shadow: 0 .5rem .5rem .5rem rgba($blk,.3);
}
&:after {
background: radial-gradient( rgba($body,.5), $key), $key;
transform: translate3d( 0, -.5rem, -.1rem) scale(.75);
box-shadow: inset 0 0 .5rem lighten($kk,30), 0 0 .5rem lighten($kk,20);
font-size: 4rem;
content: 'Return ↵';
}
&:hover, &:focus {
transform: translate3d(0,.5rem,-10rem) scale(.98);
color: $blk;
&:before {
box-shadow: 0 .1rem .5rem .25rem rgba($blk,.8);
}
}
}
.badge {
padding: 1rem;
border-radius: 50%;
width: 11rem;
height: 11rem;
margin: 2rem auto;
box-shadow: 0 .5rem .5rem .5rem rgba($blk,.3), inset 0 0 0 5rem $blk;
transform: scale(.9);
position: relative;
border: dashed .5rem $blk;
background: $red;
&:before, &:after, div:before, div:after {
content: '';
position: absolute;
}
&:before {
height: 1rem;
border: 3rem solid $none;
top: 10rem;
border-left: 3rem solid $blk;
border-right: 3rem solid $blk;
left: 3.5rem;
}
& > div {
width: 9rem;
height: 9rem;
background: $red;
border-radius: 1rem;
margin: auto;
position: relative;
border: 1rem solid $red;
box-shadow: inset 0 0 0 1rem $white;
transform: rotate(45deg);
&:before, &:after {
width: 4rem;
height: 2rem;
}
&:before {
border-bottom: 1rem solid $white;
border-right: 1rem solid $white;
left: 2rem;
top: 4rem;
}
&:after {
border-top: 1rem solid $white;
border-left: 1rem solid $white;
left: 4rem;
top: 2rem;
box-shadow: 0 -1rem 0 $red, -1rem 0 0 $red, -2rem 0 0 $white;
}
}
}
.button {
background: radial-gradient( farthest-corner at bottom, rgba($blk,.5), rgba($red,.1));
filter: brightness(1.5);
padding: 1rem;
box-shadow: 0 -1rem 2rem $white;
}
}
// do stuff
#z-6:checked ~ #x-7:checked ~ .x-rotation:checked,
{
~ buttons > {
.upb[for="x-8"] {
display: none;
}
.upb[for="win"] {
display: block;
}
}
}
#win:checked {
~ buttons > {
.leftb, .rightb {
display: none;
}
}
~ content {
> w > x > y {
transform: translate3d(500rem,0,0);
}
> win {
display: block;
}
}
~ wintext {
animation: wintext 7s forwards cubic-bezier(0, 0, 1, 0.5);
}
}
@keyframes wintext {
80% {
transform: scale(0);
}
99% {
transform: scale(1.5) rotate(710deg);
}
100% {
transform: scale(1) rotate(720deg);
}
}
//stars
@function stars ($a, $b, $c) {
$value: '#{random(100) - 50}vmin #{random(100) - 50}vmin '+ $b + ' ' + $c;
@for $i from 2 through $a {
$value: '#{$value} , #{random(100) - 50}vmin #{random(100) - 50}vmin '+ $b + ' ' + $c;
}
@return unquote($value);
}
@function stars2 ($a, $b, $c) {
$value: '#{random(110) - 55}vmin #{random(110) - 55}vmin '+ $b + ' ' + $c;
@for $i from 2 through $a {
$value: '#{$value} , #{random(110) - 55}vmin #{random(110) - 55}vmin '+ $b + ' ' + $c;
}
@return unquote($value);
}
$stars1: stars(5, 0, $white);
$stars2: stars2(7, 0, $red);
$stars3: stars(10, 0, $white);
@-webkit-keyframes stars {
50% {
opacity: 1;
}
100% {
transform: translate3d(0vmin,0vmin,1000rem) scale(5);
opacity: 0;
}
}
win {
display: none;
& > u {
width: 1rem;
height: 1rem;
position: absolute;
top: -10vmin;
left: 0;
box-shadow: $stars1;
animation: stars 10s -10s infinite linear;
transform: translate3d(0vmin,0vmin,-1000rem) scale(5);
opacity: 0;
}
& > u:nth-of-type(2) {
animation: stars 9s infinite linear -1s;
box-shadow: $stars2;
}
& > u:nth-of-type(3) {
animation: stars 8s infinite linear -2s;
box-shadow: $stars3;
}
& > u:nth-of-type(4) {
animation: stars 7s infinite linear -3s;
box-shadow: $stars1;
}
& > u:nth-of-type(5) {
animation: stars 6s infinite linear -4s;
box-shadow: $stars2;
}
& > u:nth-of-type(6) {
animation: stars 5s infinite linear -5s;
box-shadow: $stars3;
}
& > u:nth-of-type(7) {
animation: stars 4s infinite linear -6s;
box-shadow: $stars1;
}
& > u:nth-of-type(8) {
animation: stars 3s infinite linear -7s;
box-shadow: $stars3;
}
& > u:nth-of-type(9) {
animation: stars 2s infinite linear -8s;
box-shadow: $stars2;
}
& > u:nth-of-type(10) {
animation: stars 1s infinite linear -9s;
box-shadow: $stars1;
}
}
//@import "darkness2";
darkness {
width: 700rem;
height: 300rem;
transform: translate3d(-400rem,-160rem, 201rem);
pointer-events: none;
u {
width: 700rem;
height: 300rem;
background: rgba($blk2,.075);
transform: translate3d(0,0,-100rem) rotateX(-5deg);
&:before {
width: 700rem;
height: 300rem;
background: rgba($blk2,.075);
transform: translate3d(0,0,-30rem);
}
}
u:nth-of-type(2) {
transform: translate3d(0,0,-200rem) rotateX(-5deg);
}
u:nth-of-type(3) {
transform: translate3d(0,0,-300rem) rotateX(-5deg);
}
u:nth-of-type(4) {
transform: translate3d(0,0,-400rem) rotateX(-5deg);
}
u:nth-of-type(5) {
transform: translate3d(0,0,-500rem) rotateX(-5deg);
}
u:nth-of-type(6) {
transform: translate3d(0,0,-600rem) rotateX(-5deg);
}
&:nth-of-type(2) {
transform: translate3d(-45rem,-100rem,-100rem) rotateY(90deg);
}
}
//@import "ios";
@supports (-webkit-touch-callout: none) {
wall, content, room {
width: 10rem;
height: 10rem;
}
content {
perspective: 100rem;
transform: scale(.8);
}
w {
transform-origin: 5rem -5rem 0;
transform: translate3d(0,10rem,100rem);
}
y {
transform-origin: -5rem 0;
}
x {
transform-origin: 5rem 0 -5rem;
}
x, y, z, room {
transition: none;
}
room {
font-size: 3rem;
&:before {
transform: translate3d(0,0,10rem) rotateY(90deg) scaleY(1.009);
}
&:after {
transform: translate3d(10rem,0,0) rotateY(-90deg) scaleY(1.009);
}
}
z:nth-of-type(1) room {
&:nth-of-type(1) {
transform: translate3d(-30rem, 0, -40rem) rotateX(90deg) rotateZ(90deg);
}
&:nth-of-type(2) {
transform: translate3d(-20rem, 0, -40rem) rotateX(90deg) rotateZ(90deg);
}
&:nth-of-type(3) {
transform: translate3d(-10rem, 0, -40rem) rotateX(90deg) rotateZ(90deg);
}
&:nth-of-type(4) {
transform: translate3d(-10rem, 0, -40rem) rotateX(90deg);
&:after {
transform: translate3d(0,0,0) rotateY(-90deg) rotateX(-90deg);
}
}
&:nth-of-type(5) {
transform: translate3d(0,0,-40rem) rotateX(90deg);
&:after {
transform: translate3d(0,0,0) rotateY(-90deg) rotateX(-90deg);
}
}
&:nth-of-type(6) {
transform: translate3d(10rem,0,-30rem) rotateX(90deg) rotateZ(-90deg);
}
&:nth-of-type(7) {
transform: translate3d(20rem,0,-40rem) rotateX(90deg);
&:before {
transform: translate3d(0,0,0) rotateY(-90deg) rotateX(-90deg);
}
}
&:nth-of-type(8) {
transform: translate3d(-30rem, 0, -20rem) rotateX(90deg) rotateZ(180deg);
&:before {
transform: translate3d(10rem, -10rem, 10rem) rotateY(90deg) rotateX(0deg);
}
}
&:nth-of-type(9) {
transform: translate3d(-30rem, 0, -30rem) rotateX(90deg);
}
&:nth-of-type(10) {
transform: translate3d(-20rem, 0, -30rem) rotateX(90deg);
}
&:nth-of-type(11) {
transform: translate3d(-10rem, 0, -30rem) rotateX(90deg);
}
&:nth-of-type(12) {
transform: translate3d(0,0,-30rem) rotateX(90deg);
}
&:nth-of-type(13) {
transform: translate3d(10rem, 0, -30rem) rotateX(90deg);
}
&:nth-of-type(14) {
transform: translate3d(30rem, 0, -30rem) rotateX(90deg) rotateZ(90deg);
&:before {
transform: translate3d(0,0,0) rotateY(-90deg) rotateX(-90deg);
}
}
&:nth-of-type(15) {
transform: translate3d(-40rem, 0, -20rem) rotateX(90deg);
}
&:nth-of-type(16) {
transform: translate3d(-20rem, 0, -10rem) rotateX(90deg) rotateZ(-180deg);
&:before {
transform: translate3d(0, 10rem, 10rem) rotateY(90deg) rotateX(90deg);
}
}
&:nth-of-type(17) {
transform: translate3d(-20rem,0,-10rem) rotateX(90deg) rotateZ(-90deg);
}
&:nth-of-type(18) {
transform: translate3d(0,0,-10rem) rotateX(90deg) rotateZ(-180deg);
&:after {
transform: translate3d(0,10rem,0) rotateY(-90deg) rotateX(-90deg);
}
&:before {
transform: translate3d(10rem,0,10rem) rotateY(90deg) rotateX(-90deg);
}
}
&:nth-of-type(19) {
transform: translate3d(0,0,-20rem) rotateX(90deg);
}
&:nth-of-type(20) {
transform: translate3d(10rem,0,-20rem) rotateX(90deg);
}
&:nth-of-type(21) {
transform: translate3d(20rem, 0, -20rem) rotateX(90deg);
&:after {
transform: translate3d(-10rem,10rem,0) rotateY(-90deg) rotateX(-90deg);
}
&:before {
transform: translate3d(10rem,0,10rem) rotateY(90deg);
}
}
&:nth-of-type(22) {
transform: translate3d(-30rem, 0, 0) rotateX(90deg) rotateZ(180deg);
&:before {
transform: translate3d(10rem, -10rem, 10rem) rotateY(90deg) rotateX(0deg);
}
}
&:nth-of-type(23) {
transform: translate3d(-20rem, 0, 0) rotateX(90deg) rotateZ(-180deg);
}
&:nth-of-type(24) {
transform: translate3d(-20rem, 0, -10rem) rotateX(90deg);
}
&:nth-of-type(25) {
transform: translate3d(-10rem, 0, -10rem) rotateX(90deg);
}
&:nth-of-type(26) {
transform: translate3d(0,0,-10rem) rotateX(90deg);
}
&:nth-of-type(27) {
transform: translate3d(10rem,0,-10rem) rotateX(90deg);
}
&:nth-of-type(28) {
transform: translate3d(30rem, 0, 0rem) rotateX(90deg) rotateZ(180deg);
}
&:nth-of-type(29) {
transform: translate3d(-40rem,0,0) rotateX(90deg);
}
&:nth-of-type(30) {
transform: translate3d(-20rem, 0, 10rem) rotateX(90deg) rotateZ(-180deg);
}
&:nth-of-type(31) {
transform: translate3d(-20rem, 0, 0rem) rotateX(90deg) rotateZ(0deg);
&:after {
transform: translate3d(0,0,0) rotateY(-90deg) rotateX(-90deg);
}
}
&:nth-of-type(32) {
transform: translate3d(0,0,0) rotateX(90deg) rotateZ(90deg);
}
&:nth-of-type(34) {
transform: translate3d(10rem,0,0) rotateX(90deg);
}
&:nth-of-type(35) {
transform: translate3d(30rem, 0, 10rem) rotateX(90deg) rotateZ(180deg);
}
&:nth-of-type(36) {
transform: translate3d(-30rem, 0, 10rem) rotateX(90deg) rotateZ(90deg);
&:before {
transform: translate3d(0, 10rem, 10rem) rotateY(90deg) rotateX(90deg);
}
}
&:nth-of-type(37) {
transform: translate3d(-20rem, 0, 10rem) rotateX(90deg) rotateZ(90deg);
}
&:nth-of-type(38) {
transform: translate3d(-20rem, 0, 20rem) rotateX(90deg) rotateZ(-90deg);
&:after {
transform: translate3d(0,0,0) rotateY(-90deg) rotateX(-90deg);
}
}
&:nth-of-type(39) {
transform: translate3d(0,0,10rem) rotateX(90deg) rotateZ(90deg);
}
&:nth-of-type(40) {
transform: translate3d(10rem,0,20rem) rotateX(90deg) rotateZ(180deg);
&:after {
transform: translate3d(0,0,0) rotateY(-90deg) rotateX(-90deg);
}
}
&:nth-of-type(41) {
transform: translate3d(20rem, 0, 20rem) rotateX(90deg) rotateZ(180deg);
&:after {
transform: translate3d(0,0,0) rotateY(-90deg) rotateX(-90deg);
}
}
&:nth-of-type(42) {
transform: translate3d(30rem, 0, 20rem) rotateX(90deg) rotateZ(180deg);
&:after {
transform: translate3d(0,0,0) rotateY(-90deg) rotateX(-90deg);
}
}
}
z:nth-of-type(2) room {
transform: translate3d(0,10rem,0) rotateX(90deg);
&:nth-of-type(1) {
transform: translate3d(-30rem, 10rem, -40rem) rotateX(90deg) rotateZ(90deg);
&:after {
transform: translate3d(10rem,10rem,0) rotateY(-90deg) rotateX(90deg);
}
}
&:nth-of-type(2) {
transform: translate3d(-20rem, 10rem, -40rem) rotateX(90deg) rotateZ(90deg);
}
&:nth-of-type(3) {
transform: translate3d(-10rem, 10rem, -40rem) rotateX(90deg) rotateZ(90deg);
}
&:nth-of-type(4) {
transform: translate3d(0, 10rem, -40rem) rotateX(90deg) rotateZ(90deg);
&:after {
transform: translate3d(0,10rem,0) rotateY(-90deg) rotateX(-90deg);
}
}
&:nth-of-type(5) {
transform: translate3d(0,10rem,-30rem) rotateX(90deg) rotateZ(-90deg);
}
&:nth-of-type(6) {
transform: translate3d(10rem,10rem,-30rem) rotateX(90deg) rotateZ(-90deg);
}
&:nth-of-type(7) {
transform: translate3d(20rem,10rem,-40rem) rotateX(90deg);
&:before {
transform: translate3d(0,0,0) rotateY(-90deg) rotateX(-90deg);
}
}
&:nth-of-type(8) {
transform: translate3d(-30rem, 10rem, -20rem) rotateX(90deg) rotateZ(180deg);
&:before {
transform: translate3d(0, 0, 10rem) rotateY(90deg) rotateX(90deg);
}
}
&:nth-of-type(9) {
transform: translate3d(-30rem, 10rem, -30rem) rotateX(90deg);
}
&:nth-of-type(10) {
transform: translate3d(-20rem, 10rem, -30rem) rotateX(90deg);
}
&:nth-of-type(11) {
transform: translate3d(0, 10rem, -30rem) rotateX(90deg) rotateZ(90deg);
&:after {
transform: translate3d(0,0,0) rotateY(-90deg) rotateX(-90deg);
}
}
&:nth-of-type(12) {
transform: translate3d(10rem,10rem,-30rem) rotateX(90deg) rotateZ(90deg);
}
&:nth-of-type(13) {
transform: translate3d(20rem, 10rem, -30rem) rotateX(90deg) rotateZ(90deg);
&:before {
transform: translate3d(0,0,0) rotateY(-90deg) rotateX(-90deg);
}
}
&:nth-of-type(14) {
transform: translate3d(20rem, 10rem, -30rem) rotateX(90deg);
}
&:nth-of-type(15) {
transform: translate3d(-40rem, 10rem, -20rem) rotateX(90deg);
}
&:nth-of-type(16) {
transform: translate3d(-30rem, 10rem, -10rem) rotateX(90deg) rotateZ(-90deg);
}
&:nth-of-type(17) {
transform: translate3d(-20rem,10rem,-10rem) rotateX(90deg) rotateZ(-90deg);
&:after {
transform: translate3d(0, 10rem, 10rem) rotateY(90deg) rotateX(90deg);
}
}
&:nth-of-type(18) {
transform: translate3d(-10rem,10rem,-10rem) rotateX(90deg) rotateZ(-90deg);
&:after {
transform: translate3d(0, 10rem, 10rem) rotateY(90deg) rotateX(90deg);
}
}
&:nth-of-type(19) {
transform: translate3d(10rem,10rem,-20rem) rotateX(90deg) rotateZ(90deg);
}
&:nth-of-type(20) {
transform: translate3d(20rem,10rem,-20rem) rotateX(90deg) rotateZ(90deg);
}
&:nth-of-type(21) {
transform: translate3d(20rem, 10rem, -20rem) rotateX(90deg);
}
&:nth-of-type(22) {
transform: translate3d(-30rem, 10rem, 0) rotateX(90deg) rotateZ(180deg);
&:before {
transform: translate3d(10rem, -10rem, 10rem) rotateY(90deg) rotateX(0deg);
}
}
&:nth-of-type(23) {
transform: translate3d(-20rem, 10rem, 0) rotateX(90deg) rotateZ(-180deg);
}
&:nth-of-type(24) {
transform: translate3d(-10rem, 10rem, -10rem) rotateX(90deg) rotateZ(90deg);
}
&:nth-of-type(25) {
transform: translate3d(0, 10rem, -10rem) rotateX(90deg) rotateZ(90deg);
}
&:nth-of-type(26) {
transform: translate3d(10rem,10rem,-10rem) rotateX(90deg) rotateZ(90deg);
}
&:nth-of-type(27) {
transform: translate3d(20rem,10rem,-10rem) rotateX(90deg) rotateZ(90deg);
}
&:nth-of-type(28) {
transform: translate3d(30rem, 10rem, 0rem) rotateX(90deg) rotateZ(180deg);
}
&:nth-of-type(29) {
transform: translate3d(-40rem,10rem,0) rotateX(90deg);
}
&:nth-of-type(30) {
transform: translate3d(-20rem, 10rem, 10rem) rotateX(90deg) rotateZ(-180deg);
}
&:nth-of-type(31) {
transform: translate3d(-10rem, 10rem, 0rem) rotateX(90deg) rotateZ(90deg);
}
&:nth-of-type(32) {
transform: translate3d(-10rem,10rem,0) rotateX(90deg);
}
&:nth-of-type(34) {
transform: translate3d(10rem,10rem,0) rotateX(90deg);
}
&:nth-of-type(35) {
transform: translate3d(30rem, 10rem, 10rem) rotateX(90deg) rotateZ(180deg);
}
&:nth-of-type(36) {
transform: translate3d(-30rem, 10rem, 10rem) rotateX(90deg) rotateZ(90deg);
&:before {
transform: translate3d(0, 10rem, 10rem) rotateY(90deg) rotateX(90deg);
}
}
&:nth-of-type(37) {
transform: translate3d(-20rem, 10rem, 10rem) rotateX(90deg) rotateZ(90deg);
}
&:nth-of-type(38) {
transform: translate3d(-10rem, 10rem, 10rem) rotateX(90deg) rotateZ(90deg);
}
&:nth-of-type(39) {
transform: translate3d(0,10rem,10rem) rotateX(90deg) rotateZ(90deg);
}
&:nth-of-type(40) {
transform: translate3d(10rem,10rem,20rem) rotateX(90deg) rotateZ(180deg);
&:after {
transform: translate3d(0,0,0) rotateY(-90deg) rotateX(-90deg);
}
}
&:nth-of-type(41) {
transform: translate3d(20rem, 10rem, 20rem) rotateX(90deg) rotateZ(180deg);
&:after {
transform: translate3d(0,0,0) rotateY(-90deg) rotateX(-90deg);
}
}
&:nth-of-type(42) {
transform: translate3d(30rem, 10rem, 20rem) rotateX(90deg) rotateZ(180deg);
&:after {
transform: translate3d(0,0,0) rotateY(-90deg) rotateX(-90deg);
}
}
}
.lift {
lift {
&:before {
transform: translate3d(0,0,10rem) rotateY(90deg) rotateX(90deg);
}
}
&.lower lift {
transform: translate3d(0,0,-10rem);
}
label {
height: .5rem;
width: .5rem;
transform: translate3d(4.725rem,.125rem, 2.5rem) rotateX(90deg);
&:before, &:after {
height: .5rem;
width: .5rem;
transform: translate3d(0, 0, .025rem);
}
&:after {
transform: translate3d(0, 0, .05rem);
}
&:hover, &:focus {
transform: translate3d(4.75rem,.09rem, 2.5rem) rotateX(90deg);
}
}
@keyframes light {
90% {
box-shadow: inset 0 0 .3rem $red, 0 0 .5rem $red, 0 0 .2rem $red;
}
100% {
box-shadow: inset 0 0 .1rem $blk,inset 0 0 .3rem $red, 0 0 .2rem $red;
}
}
floor {
&:before, &:after {
width: 1rem;
transform: translate3d( 4.5rem, .05rem, 0) rotateX(90deg);
height: 3.3rem;
border-radius: 0 0 .5rem .5rem;
}
&:before {
transform: translate3d( 4.5rem, .01rem, 0) rotateX(90deg);
}
&:nth-of-type(1) {
border-radius: .1rem;
}
&:nth-of-type(2) {
transform: translate3d(0,0,10rem);
}
}
}
body:has(#gfx2:checked) {
@media (min-width: 480px) {
.lift {
label {
box-shadow: inset 0 0 .1rem $blk;
&:hover, &:focus {
box-shadow: inset 0 0 .3rem $blk;
}
}
}
floor {
&:nth-of-type(1) {
box-shadow: inset 0 0 0 .2rem $body, inset -.1rem -.1rem 0 .3rem darken($floor,10), inset .1rem .1rem 0 .3rem lighten($floor,10);
background: lighten($body,10);
}
}
}
}
//upper level
#ilift5:checked ~ content > w {
transform: translate3d(0,-1rem,100rem);
> x > y > z > room > #lift5 {
transform: translate3d(0,0,-10rem);
}
}
#ilift2:checked ~ content > w {
transform: translate3d(0,-10rem,100rem);
> x > y > z > room > #lift2 {
transform: translate3d(0,0,-10rem);
}
}
//lower level
#ilift1:checked ~ content > w {
transform: translate3d(0,10rem,100rem);
}
#ilift3:checked ~ content > w {
transform: translate3d(0,10rem,100rem);
}
#ilift4:checked ~ content > w {
transform: translate3d(0,10rem,100rem);
}
#ilift6:checked ~ content > w {
transform: translate3d(0,10rem,100rem);
}
#ilift7:checked ~ content > w {
transform: translate3d(0,10rem,100rem);
}
// z loop
@for $i from 0 through 7 {
#z-#{$i}:checked {
~ content > w > x > y > z {
transform: translate3d(0,0,(($i - 3 ) * 10rem));
}
}
}
// x loop
@for $i from 0 through 9 {
#x-#{$i}:checked {
~ content > w > x > y {
transform: translate3d((($i - 3) * 10rem),0,0);
}
}
}
#top-view:checked {
~ content > w {
transform: translate3d(5rem,20rem,-60rem) rotateX(-90deg) !important;
}
}
darkness {
width: 70rem;
height: 30rem;
transform: translate3d(-40rem,-16rem, 20.1rem);
u {
width: 70rem;
height: 30rem;
transform: translate3d(0,0,-10rem) rotateX(-5deg);
&:before {
width: 70rem;
height: 30rem;
transform: translate3d(0,0,-3rem);
}
}
u:nth-of-type(2) {
transform: translate3d(0,0,-20rem) rotateX(-5deg);
}
u:nth-of-type(3) {
transform: translate3d(0,0,-30rem) rotateX(-5deg);
}
u:nth-of-type(4) {
transform: translate3d(0,0,-40rem) rotateX(-5deg);
}
u:nth-of-type(5) {
transform: translate3d(0,0,-50rem) rotateX(-5deg);
}
u:nth-of-type(6) {
transform: translate3d(0,0,-60rem) rotateX(-5deg);
}
&:nth-of-type(2) {
transform: translate3d(-4.5rem,-10rem,-10rem) rotateY(90deg);
}
}
}Final Output
Written by: Piyush Patil
Code Credits: https://codepen.io/ivorjetski/pen/poQpveN
If you found any mistakes or have any doubts please feel free to Contact Us
Hope you find this post helpful💖
