div+scss实现三维走出迷宫游戏代码-html代码-BFW代码库

代码语言：html
所属分类：游戏
代码描述：div+scss实现三维走出迷宫游戏代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">

  
  
<style type = 'text/scss'>
$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: translat.........完整代码请登录后点击上方下载按钮下载查看